我对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对我有效。
发布于 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
复制相似问题