Question

背景信息：
你好，最近我一直在努力为我的学校创建一个网站生成器，它已经很顺利，它几乎拥有与Wix一样多的功能。最近我尝试通过parallax.js添加对视差效果的支持，并且它完美地工作（你可以生成网站并在保存时看到它并在新标签中打开它），但parallax.js不重新扫描页面每次页面更改时的视差元素。我尝试使用iframe来做到这一点，并且它有效。但是，我给他们预览的方式是代码是在客户端生成的（在页面制作者中），所以我需要一种方法来使用生成的代码通过javascript“加载”IFrame。
直接指向：如何加载使用javascript生成客户端代码并存储在变量中的IFrame页面？每次对页面进行更改时都需要重新加载，这将触发第三方软件库。

Answer 1

你应该能够逃脱： -

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;

然而，更具未来感的＆＃39;取决于您的浏览器支持目标的方法可能是使用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>";

进一步阅读：

使用localy生成的代码通过javascript加载IFrame

1 个答案: