Jquery 未加载到包含 jquery 的 iFrame 中

Posted 2023-05-09

【中文标题】Jquery 未加载到包含 jquery 的 iFrame 中

【英文标题】：Jquery not loading inside iFrame that includes jquery

【发布时间】：2020-07-29 15:50:42

【问题描述】：

我必须动态创建一个 iframe 并用内容填充它，所以我正在执行以下操作：

var ifrm = document.createElement("iframe");
ifrm.id = 'myIframe';
document.getElementById('myIframe').contentWindow.document.write(myIframeContent);  

问题在于 iframe 内容依赖于 jquery。 jquery 包含在 myIframeContent 的头部，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

但是，在 iframe 中使用 jquery 选择器（例如 $('#myDiv')）会导致变量未定义。我假设是因为加载 jquery 时出现问题，但我不确定为什么。是因为 iframe 的创建方式吗？ iframe 内容中包含的其他脚本工作正常。

【问题讨论】：

为什么需要使用 iFrame？在 div 中几乎不能做任何事情。例如，如果我的 CSS 破坏了从其他地方包含的小部件，我只使用 iFrame

如果没有嵌入 jQuery，那么 $('#myDiv') 应该会在浏览器控制台中给你一个错误消息，指出 $ 没有定义。

@CBroe 是的，这就是我收到的错误消息。

@mplungjan 必须使用 iframe

好吧，当在这里询问此类问题时，提出一个正确 minimal reproducible example ;-)

【参考方案1】：

也许你只需要转义<script><\/script>

由于安全错误，所以无法运行它

var ifrm = document.createElement("iframe");
ifrm.id = 'myIframe';
const myIframeContent = `<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"><\/script>
<div id="myDiv">Hello</div>
<script>$("#myDiv").html("Hello there")<\/script>`;
document.getElementById("content").appendChild(ifrm);
document.getElementById("myIframe").contentWindow.document.write(myIframeContent); 

<div id="content"></div>