Question

我有以下结构。

<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>";

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

我试过了：

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

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

如何使用包含HTML？

的变量设置iframe的内容

更新＃1

：变量s的内容如下 - ＆gt;

 <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后我得到了这样的[通过萤火虫检查]
请注意，它没有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>

Answer 1

我设法用

做到了

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

Answer 2

使用＆＃34;内容＆＃34;功能：

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

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

Answer 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步

Answer 4

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

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

Answer 5

为什么不使用

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

而不是计时器？

Answer 6

您要为此使用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。

Answer 7

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

    // clear content 
    element.src = "about:blank";
    // write new content
    element.contentWindow.document.open();
    element.contentWindow.document.write(newHtml);
    element.contentWindow.document.close();

Answer 8

你需要 -

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)

Answer 9

使用 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);

Answer 10

如果您要将html内容包含脚本标签设置为iframe，则可以访问使用以下方法创建的iframe：

$(iframeElement).contentWindow.document

因此您可以在其中设置任何元素的innerHTML。

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

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

Answer 11

尝试创建一个DOM对象：

var s = $('<html><head></head><body><div>Test_Div</div></body></html>');

设置iframe的内容

11 个答案:

统一解决方案：

现金：