Red*_*Red 49 html javascript iframe jquery
我有以下结构.
<div>
<p>Hello World !!</p>
</div>
<iframe id="myiframe" src='myiframeContent.html'></iframe>
我有以下JavaScript变量content:
var s ="<html><head></head><body><div>Test_Div</div></body></html>";
如何使用myiframe带变量的id更改iframe的内容s？
我试过了:
$("#myiframe").html(s);
这给了我非常不寻常的回报,它将当前页面的所有内容更改为VAR S
Ex:样式,背景等.
如何使用包含HTML？的变量设置iframe的内容？
更新#1
:变量的内容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>
Red*_*Red 94
我设法做到了
var html_string= "content";
document.getElementById('output_iframe1').src = "data:text/html;charset=utf-8," + escape(html_string);
x10*_*x10 27
使用"内容"功能:
$('#some-id').contents().find('html').html("some-html")
相关小提琴:http://jsfiddle.net/fDFca/
Gav*_*vin 12
要在所有现代浏览器上工作,您需要两个步骤:
添加javascript:void(0);的src属性的iframe元素.否则,内容将被srcFirefox上的空白覆盖.
<iframe src="javascript:void(0);"></iframe>
以编程方式更改内部html元素的内容.
$(iframeSelector).contents().find('html').html(htmlContent);
@susan 评论(链接)的第1步
$('#myiframe').contents().find('html').html(s);
你可以从这里查看http://jsfiddle.net/Y9beh/
您想为此使用 iframe 的srcdoc属性（MDN 文档）。
var html_string = "<html><body><h1>My epic iframe</p></body></html>";
document.querySelector('iframe').srcdoc = html_string;
使用此方法的好处是，例如在此页面上列出的 Red 方法，添加的 iframe 内容srcdoc被视为同源。如果您愿意，这种方式可以继续使用 JavaScript 操作和访问 iframe。
使用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);
我需要重复使用相同的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();
}
| 归档时间： |
|
| 查看次数： |
119152 次 |
| 最近记录： |