使用本地生成的代码通过 JavaScript 加载 IFrame

Loading IFrame through javascript using localy generated code

本文关键字：JavaScript 加载 IFrame 代码      更新时间：2023-09-26

背景信息：
你好最近我一直在尝试为我的学校创建一个网站生成器，它进展顺利，它几乎具有与 Wix 一样多的功能。最近我尝试通过视差.js添加对视差效果的支持，它运行良好（您可以生成网站并在保存并在新选项卡中打开它时看到它），但是视差.js不会在每次更改页面时重新扫描页面以查找视差元素。我尝试使用iframe来执行此操作，它起作用了。但是，我给他们预览的方式是代码是在客户端（在页面制作器中）生成的，所以我需要一种方法来使用生成的代码通过 javascript "加载"IFrame。
直截了当
：如何加载使用由 JAVASCRIPT 在客户端生成并存储在变量中的代码的 IFrame 页面？每次对页面进行更改时都需要重新加载它，这将触发第三方软件库。

你应该能够逃脱： -

var newCode = "<p>YOUR HTML</P>";
$('#myIframe').contents().find('html').html(newCode);

如果 jQuery 不可用，则相当于： -

var newCode = "<p>YOUR HTML</P>";
var iframe = document.getElementById('myIframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.getElementsByTagName('html')[0].innerHTML = newCode;

但是，根据您的浏览器支持目标，一种更"未来主义"的方法可能是使用 HTML5 srcdoc 属性。在撰写本文时，IE 不支持此功能。

<iframe srcdoc="<p>Hello world!</p>" src="demo_iframe_srcdoc.htm"></iframe>

如果浏览器支持 srcdoc 属性，它将覆盖 src 属性中指定的内容（如果存在）。

要使用变量更新它，您应该能够选择 iframe 并获取 srcdoc 属性，然后将变量指定为值。

var newCode = "<p>New code</p>";
document.querySelector('iframe').setAttribute('srcdoc', newCode);
// or try this -
document.getElementById("myFrame").srcdoc = "<p>Some new content inside the iframe!</p>";

延伸阅读：

  1. http://www.w3schools.com/tags/att_iframe_srcdoc.asp
  2. http://www.w3schools.com/jsref/prop_frame_srcdoc.asp
相关文章：