设置 iframe 的内容

IT技术 javascript jquery html iframe
2021-01-21 08:48:14

我有以下结构。

<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：样式、背景等。

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

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

我设法做到了

var html_string= "content";
document.getElementById('output_iframe1').src = "data:text/html;charset=utf-8," + escape(html_string);
有没有办法在 iframe 中保留文档的来源？如果“html_string”中有任何超文本链接，那么它们会在本地解析到主窗口吗？
2021-03-20 08:48:14
不，但我从来没有真正寻找过。
2021-03-27 08:48:14
一旦您将 locals 和 LocalS 设置为相同的情况，这将非常有效。
2021-03-31 08:48:14
此方法将为您提供具有疯狂宽度的警报框。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 关闭警报框。
2021-04-06 08:48:14
2021-04-10 08:48:14

使用“内容”功能：

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

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

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

统一解决方案：

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

  1. 添加javascript:void(0);为srciframe 元素的属性。否则，内容将被srcFirefox 上的空白覆盖。

    <iframe src="javascript:void(0);"></iframe>

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

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

学分：

@susan评论（链接）中的第 1 步

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

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

我需要重复使用相同的 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();
}
迄今为止最好的香草 JS 解决方案。
2021-03-20 08:48:14
src="about:blank" 不适用于 safari 10.1 检查于 2018-08-09
2021-03-22 08:48:14
您的方法确实有效，但是您只是不断替换 html css 而不是 javascript，这意味着定义了任何函数事件，它将被定义，直到您重新加载 iframe 或整个页面
2021-04-02 08:48:14 
$('#myiframe').contents().find('html').html(s);

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

其它你可能感兴趣的问题
上一篇jQuery：获取数据属性 下一篇将选择值重置为默认值