iframe问题:根本没有加载<script src="...">
我对iframe的使用有一些问题。我一次只问一个问题。我正在LaTeX.js playground上工作，想要添加一些JavaScript来处理\marginpar，但无论我做什么，Chrome和Firefox都不会尝试加载脚本。如果在任何框架之外使用完全相同的代码，它就会起作用。
我尝试了绝对路径和相对路径，还尝试了file、http和https协议。结果总是一样的。
相关代码如下：
<iframe id="preview" sandbox="allow-same-origin allow-scripts">
<html>
<head>
<title>LaTeX.js Show­case</title>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css/katex.css">
<link type="text/css" rel="stylesheet" href="css/article.css">
<link type="text/css" rel="stylesheet" href="css/error.css">
<script src="https://latex.js.org/js/base.js"></script>
</head>
...问题出在base.js上。开发人员工具在控制台中没有显示错误，在sources选项卡中没有显示条目，在network选项卡中也没有显示条目。
更新:正如我在评论中所说，上面的代码是使用JavaScript修改DOM的结果；然而，设置iframe.contentWindow.document.documentElement似乎不会触发在<head>中加载脚本，只有答案中的选项2对我有效。
回答 1
Stack Overflow用户
发布于 2018-06-02 08:07:26
选项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来验证是否正确加载了d3.v4.min.js。
选项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：
您可能会在使用相对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进行任何直接操作。
https://stackoverflow.com/questions/50651856
复制相似问题