Javascript 设置 iframe 的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8240101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set content of iframe
提问by Red
I have the following structure.
我有以下结构。
<div>
<p>Hello World !!</p>
</div>
<iframe id="myiframe" src='myiframeContent.html'></iframe>
and I have the following JavaScript variable with content:
我有以下 JavaScript 变量content：
var s ="<html><head></head><body><div>Test_Div</div></body></html>";
How can I change the content of iframe with id myiframewith variable s?
如何更改myiframe带有变量的id 的 iframe 的内容s？
I tried:
我试过：
$("#myiframe").html(s);
Which giving me very unusual return,it changes all the content of Current page to VAR SEx : styles,background etc..
这给了我非常不寻常的回报，它将当前页面的所有内容更改为VAR SEx：样式、背景等。
How can i set the content of an iframe with a variable that contain HTML?
如何使用包含的变量设置 iframe 的内容HTML？
Update #1
更新 #1
: The content of variable sfollows - >
: 变量内容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>
After applying this variable to iframe i got like this [inspected through firebug]
Note that it doesnt have BODY,Headtag ,but the above one [var s] have BODYtag.
将此变量应用于 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>
回答by Red
I managed to do it with
我设法做到了
var html_string= "content";
document.getElementById('output_iframe1').src = "data:text/html;charset=utf-8," + escape(html_string);
回答by x10
Use the "contents" function:
使用“内容”功能：
$('#some-id').contents().find('html').html("some-html")
Relevant fiddle: http://jsfiddle.net/fDFca/
相关小提琴：http: //jsfiddle.net/fDFca/
回答by Gavin
Unified Solution:
统一解决方案：
In order to work on all modern browsers, you will need two steps:
为了在所有现代浏览器上工作，您需要两个步骤：
Add
javascript:void(0);assrcattribute for the iframe element. Otherwise the content will be overriden by the emptysrcon Firefox.<iframe src="javascript:void(0);"></iframe>Programatically change the content of the inner
htmlelement.$(iframeSelector).contents().find('html').html(htmlContent);
添加
javascript:void(0);为srciframe 元素的属性。否则，内容将被srcFirefox 上的空白覆盖。<iframe src="javascript:void(0);"></iframe>以编程方式更改内部
html元素的内容。$(iframeSelector).contents().find('html').html(htmlContent);
Credits:
学分：
Step 1 from comment (link) by @susan
Step 2 from solutions (link1, link2) by @erimerturk and @x10
@susan评论（链接）中的第 1 步
回答by mrrrk
I needed to reuse the same iframe and replace the content each time. I've tried a few ways and this worked for me:
我需要重复使用相同的 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();
Here it is as a function:
这是一个函数：
function replaceIframeContent(iframeElement, newHTML)
{
iframeElement.src = "about:blank";
iframeElement.contentWindow.document.open();
iframeElement.contentWindow.document.write(newHTML);
iframeElement.contentWindow.document.close();
}
回答by erimerturk
$('#myiframe').contents().find('html').html(s);
you can check from here http://jsfiddle.net/Y9beh/
你可以从这里查看http://jsfiddle.net/Y9beh/
回答by Sergey
Why not use
为什么不使用
$iframe.load(function () {
var $body = $('body', $iframe.get(0).contentWindow.document);
$body.html(contentDiv);
});
instead of timer ?
而不是计时器？
回答by ipr101
You need -
你需要 -
var $frame = $('myiframe');
setTimeout( function() {
var doc = $frame[0].contentWindow.document;
var $body = $('body',doc);
$body.html('<div>Test_Div</div>');
}, 1 );
Code taken from - putting html inside an iframe (using javascript)
回答by yaya
If you want to set an html content containg script tag to iframe, you have access to the iframe you created with:
如果您想将包含脚本标记的 html 内容设置为 iframe，您可以访问您创建的 iframe：
$(iframeElement).contentWindow.document
so you can set innerHTML of any element in this.
所以你可以在这个中设置任何元素的innerHTML。
But, for script tag, you should create and append an script tag, like this:
但是，对于脚本标签，您应该创建并附加一个脚本标签，如下所示：
