设置 iframe 的内容答案

【问题标题】：Set content of iframe设置 iframe 的内容
【发布时间】：2012-01-04 14:55:23
【问题描述】：

我有以下结构。

<div>
<p>Hello World !!</p>
</div>
<iframe id="myiframe" src='myiframeContent.html'></iframe>

我有以下带有 content 的 JavaScript 变量：

var s ="<html><head></head><body><div>Test_Div</div></body></html>";

如何使用变量 s 更改 ID 为 myiframe 的 iframe 的内容？

我试过了：

$("#myiframe").html(s);

这给了我一个非常不寻常的回报，它将当前页面的所有内容更改为VAR S 例如：样式、背景等。

如何使用包含HTML 的变量设置 iframe 的内容？

变量s的内容如下：

 <html>
  <head>
    <title>{page_name}</title>
    <meta name="keywords" content="{page_meta_tags}" />
    <script src="/1.js"></script>
    <script src="/2.js"></script>
 <style>
   h2{
 
 color:red;} 

 h1{
 color:red;}

 body{
     
 background-color:#f0eded;
 color:74f503;
 font-family:Verdana, Geneva, sans-serif;
 background:url({getUrl});}
  </style> 
  </head>
   
  <body>
    yahoo
    <div style="float:right">{pagecomment}</div>
    <div id="blogstart" style="">
      <h1>My Blog</h1>
      {nextPrevPagination}
      {blog} 
      {nextPrevPagination}
    </div>
    <p>My Page Name : {page_name}</p><br/>
    <p>Name of this template</p><br/>
    <p>Date started this page : {page_date}</p><br/>
    <label>Address</label>
    <textarea>{page_address}</textarea>
    
    <span>Country : {page_country} State :{page_state}</span>
    <p>page City : {page_city} Page Pincode {page_pincode}</p>
    <a href="mailto:{page_email}">Email me</a>
    {page_bio_title} and {page_bio_desc}
    <img src="{page_profile}" />
    {page_avatar}
    <p>Contact me : {page_mobile} , {page_landline} </p>
    <a href="http://www.facebook.com/{page_facebook_user}">I am on Facebook</a>
    <a href="http://www.twitter.com/{page_twitter_user}"></a>
  </body>
  
</html>

将此变量应用于 iframe 后，我得到了这样的结果 [通过 firebug 检查]
注意它没有BODY,Head标签，但上面的[var s]有BODY标签。

<html>  
  
    <title>{page_name}</title>
    <meta content="{page_meta_tags}" name="keywords">
    
    
 <style>
   h2{
 
 color:red;} 

 h1{
 color:red;}

 body{
     
 background-color:#f0eded;
 color:74f503;
 font-family:Verdana, Geneva, sans-serif;
 background:url({url});}
  </style> 
  
    yahoo
    <div style="float: right;">{pagecomment}</div>
    <div style="" id="blogstart">
      <h1>My Blog</h1>
      {nextPrevPagination}
      {blog} 
      {nextPrevPagination}
    </div>
    <p>My Page Name : {page_name}</p><br>
    <p>Name of this template</p><br>
    <p>Date started this page : {page_date}</p><br>
    <label>Address</label>
    <textarea>{page_address}</textarea>
    
    <span>Country : {page_country} State :{page_state}</span>
    <p>page City : {page_city} Page Pincode {page_pincode}</p>
    <a href="mailto:{page_email}">Email me</a>
    {page_bio_title} and {page_bio_desc}
    <img src="{page_profile}">
    {page_avatar}
    <p>Contact me : {page_mobile} , {page_landline} </p>
    <a href="http://www.facebook.com/{page_facebook_user}">I am on Facebook</a>
    <a href="http://www.twitter.com/{page_twitter_user}"></a>
  </html>

【问题讨论】：

可能重复：stackoverflow.com/q/4614850/508702
Duplicate of: stackoverflow.com/q/10418644/471696 ，也有比这个更好的答案。
请注意，HTML5 引入了一个允许自动注入 HTML 的新参数：w3schools.com/tags/att_iframe_srcdoc.asp 唯一的问题是浏览器兼容性...
@JamesM.Greene 如果其他问题出现在此问题之后，是否可以将其标记为重复？
putting html inside an iframe (using javascript)的可能重复

标签： javascript jquery html iframe

【解决方案1】：

我设法做到了

var html_string= "content";
document.getElementById('output_iframe1').src = "data:text/html;charset=utf-8," + escape(html_string);

【讨论】：

一旦你将 locals 和 LocalS 设置为相同的大小写，效果会很好。
没有，但我从来没有真正寻找过。
@见stackoverflow.com/questions/10418644/…
这个方法会给你疯狂宽度的警告框。 The web page at data:text/html;charset=utf-8,<html> <head> <title>{page_name}</title> <meta name="keywords" content="{page_meta_tags}" /> <script src="/1.js"></script> <script src="/2.js"></script> <style> h2{................................................. says: 。您的访问者无法阅读此类警报框的内容。他们必须使用 ESC 来关闭警告框。
有什么方法可以在 iframe 中保留文档的来源？如果“html_string”中有任何超文本链接，那么它们会被本地解析到主窗口吗？

【解决方案2】：

使用“内容”功能：

$('#some-id').contents().find('html').html("some-html")

相关小提琴：http://jsfiddle.net/fDFca/

【讨论】：

它不工作，它只更新 HTML，但没有 BODY 标签，我该如何解决这个问题？
body 标签好像插入就好了。请参阅更新的小提琴。 jsfiddle.net/fDFca/1
<iframe id="test"> <html> <head> <title></title> </head> <body> </body> </html> </iframe> ITS FROM UR JSFIDDLE ，通过萤火虫检查，它是如何发生的？？
请不要对我大喊大叫。这是 Firefox/Firebug/whatever 在页面上显示内容的方式。用 Chrome 试试，你会发现 Body 标签显示得很好。
请注意，如果您的 iframe 是从 JS 生成的而不是静态的，您需要设置 src...src='javascript:void(0)' 否则，它将写入您的内容，然后尝试加载 src（即使没有）并留下空白 iframe。

【解决方案3】：

统一解决方案：

为了在所有现代浏览器上工作，您需要两个步骤：

将javascript:void(0); 添加为iframe 元素的src 属性。否则内容将被 Firefox 上的空 src 覆盖。
```
<iframe src="javascript:void(0);"></iframe>
```

以编程方式更改内部 html 元素的内容。

$(iframeSelector).contents().find('html').html(htmlContent);

学分：

@susan 的评论 (link) 中的第 1 步

@erimerturk 和 @x10 的解决方案（link1、link2）的第 2 步

【讨论】：

刚刚试过这个，在 IE11 中的 "javascript:void(0);"值导致 DNS 错误页面显示在初始 iframe 中。我用“about:blank”替换了它，它起作用了。

【解决方案4】：

我需要重复使用相同的 iframe 并每次都替换内容。我尝试了几种方法，这对我有用：

// Set the iframe's src to about:blank so that it conforms to the same-origin policy 
iframeElement.src = "about:blank";

// Set the iframe's new HTML
iframeElement.contentWindow.document.open();
iframeElement.contentWindow.document.write(newHTML);
iframeElementcontentWindow.document.close();

这是一个函数：

function replaceIframeContent(iframeElement, newHTML)
{
    iframeElement.src = "about:blank";
    iframeElement.contentWindow.document.open();
    iframeElement.contentWindow.document.write(newHTML);
    iframeElement.contentWindow.document.close();
}

【讨论】：

src="about:blank" 不适用于 2018 年 8 月 9 日检查的 safari 10.1
迄今为止最好的原生 JS 解决方案。
您的方法确实有效，但是您只需继续替换 html css 而不是 javascript，这意味着定义了任何函数事件，直到您重新加载 iframe 或整个页面，它才会被定义

【解决方案5】：

您希望为此使用 iframe 的 srcdoc 属性 (MDN documentation)。

var html_string = "<html><body><h1>My epic iframe</p></body></html>";
document.querySelector('iframe').srcdoc = html_string;

使用此方法优于此页面上列出的 Red 方法的好处是，添加 srcdoc 的 iframe 内容被视为同源。如果您愿意，这种方式可以继续使用 JavaScript 操作和访问 iframe。

【讨论】：

【解决方案6】：

$('#myiframe').contents().find('html').html(s);

您可以从这里查看http://jsfiddle.net/Y9beh/

【讨论】：

【解决方案7】：

为什么不使用

$iframe.load(function () {
    var $body = $('body', $iframe.get(0).contentWindow.document);
    $body.html(contentDiv);
});

而不是计时器？

【讨论】：

【解决方案8】：

使用Blob:

var s ="<html><head></head><body><div>Test_Div</div></body></html>";
var iframe = document.getElementById("myiframe");
var blob = new Blob([s], {type: "text/html; charset=utf-8"});
iframe.src = URL.createObjectURL(blob);

【讨论】：

效果很好，可能是迄今为止最好的答案，因为使用这种方法，我们可以渲染 javascript 而无需一次又一次地复制事件和函数

【解决方案9】：

你需要 -

var $frame = $('myiframe');
    setTimeout( function() {
            var doc = $frame[0].contentWindow.document;
            var $body = $('body',doc);
            $body.html('<div>Test_Div</div>');
    }, 1 );

代码取自 - putting html inside an iframe (using javascript)

【讨论】：

【解决方案10】：

如果您想将包含脚本标签的 html 内容设置为 iframe，您可以访问您创建的 iframe：

$(iframeElement).contentWindow.document

所以你可以在这个中设置任何元素的innerHTML。

但是，对于脚本标签，您应该创建并附加一个脚本标签，如下所示：

https://stackoverflow.com/a/13122011/4718434

【讨论】：