iframe问题：<script src =“...”>根本没有加载

Question

我在使用 iframe 时遇到了一些问题。我会一次问一个问题。我正在处理 LaTeX.js playground ，并希望添加一些JavaScript来处理 \ marginpar s，但无论我做什么，Chrome和Firefox都不会尝试加载脚本。如果在任何帧之外使用完全相同的代码，它就有效。

＆＃xA;＆＃xA;

我尝试了绝对和相对路径，我尝试了 file ，<代码> http 和 https 协议。总是相同的结果。

＆＃xA;＆＃xA;

以下是相关代码：

＆＃xA;＆＃xA;

 ＆lt; iframe id =“预览“sandbox =”allow-same-origin allow-scripts“＆gt;＆＃xA; ＆LT; HTML＆GT;＆＃XA; ＆LT; HEAD＆GT;＆＃XA; ＆lt; title＆gt; LaTeX.js Show＆amp; shy; case＆lt; / title＆gt;＆＃xA; ＆lt; meta charset =“UTF-8”＆gt;＆＃xA; ＆lt; link type =“text / css”rel =“stylesheet”href =“css / katex.css”＆gt;＆＃xA; ＆lt; link type =“text / css”rel =“stylesheet”href =“css / article.css”＆gt;＆＃xA; ＆lt; link type =“text / css”rel =“stylesheet”href =“css / error.css”＆gt;＆＃xA;＆＃xA; ＆lt; script src =“https://latex.js.org/js/base.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆LT; /头＆GT;＆＃XA; ...＆＃xA;  

＆＃xA;＆＃xA;

问题是 base.js 。开发人员工具在控制台中没有显示错误，在源选项卡中没有输入，在网络选项卡中也没有输入。

＆＃xA;＆＃xA;

更新：正如我在评论中所说，上面的代码是使用JavaScript修改DOM的结果;但是，设置 iframe.contentWindow.document.documentElement 似乎没有触发加载＆lt; head＆gt; 中的脚本，只有答案中的选项2适用于我。

＆＃XA;

Answer 1

选项1：使用DOM

对我而言iframe.contentWindow.replaceChild(newDocumentElement, iframe.contentWindow.documentElement)无效（replaceChild不是方法，iframe.contentWindow.documentElement.parentNode为空）。我成功取代了iframe的头部和身体：

var iframe = document.getElementById('preview');
var iframeDocument = iframe.contentDocument;
var head = document.createElement('head');
var body = document.createElement('body');
var library = document.createElement('script');

//library.src = 'https://latex.js.org/js/base.js';
library.src = 'https://d3js.org/d3.v4.min.js';
head.appendChild(library);
body.appendChild(document.createTextNode('Hello, World!'));
iframeDocument.head.parentNode.replaceChild(head, iframeDocument.head);
iframeDocument.body.parentNode.replaceChild(body, iframeDocument.body);

这是一个小提琴：https://jsfiddle.net/zkb91faf/

您可以通过导航到调试器中的iframe（请参阅here for Chrome和here for Firefox）并在控制台中输入d3.v4.min.js来验证是否正确加载了d3

选项2：使用src / srcdoc

如果我没有提及iframe.srcdoc，我会失职。看起来你只是使用静态HTML，所以它可能是合适的。

您只需通过以下内容进行设置：

iframe.srcdoc = newDocumentElement.outerHTML;

或者，如果您想支持旧浏览器，可以通过iframe.src和数据URI进行设置：

iframe.src = 'data:text;base64,' + btoa(newDocumentElement.outerHTML);

如果您需要unicode支持，请参阅https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

注意使用相对URL：

您可能会遇到使用相对网址的问题，例如<link type="text/css" rel="stylesheet" href="css/article.css">中的相对网址，因为您的iframe将没有正确的URI。您可能需要使用绝对URL。

更新：在加载文档后添加脚本标记：

看起来罪魁祸首在于base.js，where you attach and run code based on the DOMContentLoaded event。 DOM已加载，因此此事件不会触发。你可以做的是检查窗口是否已经加载，然后运行你的初始化代码，如果是的话。通过https://stackoverflow.com/a/9457996/6184972：

if (document.readyState === "complete" || document.readyState === "loaded") {
     completed();
}

在这种情况下，您可能需要在头部之前替换正文，以防completed()对DOM进行任何直接操作。