如何使用 jQuery 将 HTML 内容插入到 iFrame 中？

这是使用 jQuery 将 HTML 内容插入 iFrame 的任务。为此，我们可以使用 jQuery contents() 方法。

.contents() 方法：它返回所有直接子元素，包括所选元素的文本和注释节点。

句法：

$(selector).contents()

方法：
• 在 body 部分找到 iframe。
• 获取要插入到 iframe 中 body 部分的值
• 将值放入 iframe

jQuery 代码显示这种方法的工作：
示例 1：

  

    How to insert HTML content 
      into an iFrame using jQuery?
    
  
    
        textarea,
        iframe {
            display: block;
            margin: 10px 0;
        }
          
        iframe {
            width: 500px;
            border: 1px solid #000000;
        }
    

  

    
         
        GeeksForGeeks 
    
        
          How to insert HTML content into an iFrame using jQuery
      
                  GEEKSFORGEEKS - A computer science portal for geeks.
      
        
          Click to Insert
      
        
        
            function updateIframe() {
                var myFrame = $("#myframe").contents().find('body');
                var textareaValue = $("textarea").val();
                myFrame.html(textareaValue);
            }
        
    

  

输出：
点击按钮前：

点击按钮后：

示例 2：

  

    How to insert HTML content
      into an iFrame using jQuery?
    
  
    
        iframe {
            width: 500px;
            border: 1px solid #000000;
        }
    

  

    
         
        GeeksForGeeks 
    
        How to insert HTML content 
          into an iFrame using jQuery
        
        Text to be insert : "GEEKSFORGEEKS 
          - A computer science portal for geeks."
        
      
        
            $("#iframe").ready(function() {
                var body = $("#iframe").contents().find("body");
                body.append(
                  'GEEKSFORGEEKS - A computer science portal for geeks.');
            });
        
    

  

输出：