Javascript iframe问题：<；脚本src="&引用&燃气轮机；完全没有加载_Javascript_Iframe

Javascript iframe问题：<；脚本src="&引用&燃气轮机；完全没有加载

javascript iframe

Javascript iframe问题：<；脚本src="&引用&燃气轮机；完全没有加载,javascript,iframe,Javascript,Iframe,我对iframe的使用有一些问题。我一次只问一个问题。我正在开发，想添加一些JavaScript来处理\marginpars，但无论我做什么，Chrome和Firefox都没有尝试加载脚本。如果在任何帧之外使用完全相同的代码，则该方法有效我尝试了绝对路径和相对路径，并尝试了文件、http、和https协议。结果总是一样的以下是相关代码： <iframe id="preview" sandbox="allow-same-origin allow-scripts"> <ht

我对iframe的使用有一些问题。我一次只问一个问题。我正在开发，想添加一些JavaScript来处理

\marginpar

s，但无论我做什么，Chrome和Firefox都没有尝试加载脚本。如果在任何帧之外使用完全相同的代码，则该方法有效

我尝试了绝对路径和相对路径，并尝试了

文件

、

http

、和

https

协议。结果总是一样的

以下是相关代码：

<iframe id="preview" sandbox="allow-same-origin allow-scripts">
  <html>
    <head>
      <title>LaTeX.js Show&shy;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>
    ...


LaTeX.js Show；案例
...

问题是

base.js

。开发人员工具在控制台中不显示错误，在源选项卡中不显示条目，在网络选项卡中不显示条目

更新：正如我在评论中所说，上面的代码是使用JavaScript修改DOM的结果；但是，设置

iframe.contentWindow.document.documentElement

似乎不会触发在

中加载脚本，只有答案中的选项2对我有效。

选项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);

这是一把小提琴：

您可以通过导航到调试器中的iframe（请参见和），并在控制台中键入

d3

来验证

d3.v4.min.js

是否正确加载

选项2：使用

src

srcdoc

如果我不提，那我就是失职了。看起来您只是在使用静态HTML，因此它可能是合适的

您只需通过以下方式进行设置：

iframe.srcdoc=newDocumentElement.outerHTML
或者，如果您想支持较旧的浏览器，可以通过iframe.src
和数据URI进行设置：
iframe.src = 'data:text;base64,' + btoa(newDocumentElement.outerHTML);

如果需要unicode支持，请参阅
注意使用相对URL：
您可能会在使用相对URL时遇到问题，如
中所述，因为您的iframe没有正确的URI。您可能需要使用绝对URL
更新：加载文档后添加脚本标记：
罪魁祸首似乎在base.js
中。DOM已加载，因此不会触发此事件。您可以做的是检查窗口是否已加载，然后运行初始化代码（如果已加载）。通过：
在这种情况下，您可能需要在头部之前替换主体，以防completed（）
对DOM进行任何直接操作。
除非规范发生了重大变化，否则我很确定您不能以这种方式将内容放入iFrame中。你有没有试过用一个新的来代替？哦，天哪iframe.srcdoc
工作并真正加载脚本！我只是不喜欢它，因为每次按下一个键，浏览器都会重新加载所有CSS和脚本。我将尝试让选项1起作用。我不明白：（我只是不能让选项1起作用。但如果头部没有改变，我可以使用选项1，否则使用选项2。所以如果没有人能解释为什么选项1不起作用，我会接受你的答案。我不太明白。你是说它只起作用一次，然后你试图改变它，然后它就不起作用了？还是根本不起作用？啊，我明白我的意思了onfused you:Option 1在加载脚本方面从来都不起作用，Option 2总是起作用，但每次使用它时都会重新加载所有css和js，即使只更改了正文中的一个单词。因此我只需检查
的innerHTML
是否已更改，然后才使用Option 2，否则只使用Option 1.Hmmm，Option更新DOM的部分1适用于我加载脚本（在我的示例中，我通过查看是否加载了d3
来验证它）。如何替换文档？我已经尝试了上面的示例，并使用了iframe.contentDocument.documentElement.parentNode.replaceChild（newDocumentElement，iframe.contentDocument.documentElement）而且它们都为我工作。您如何检查脚本是否已加载？
if (document.readyState === "complete" || document.readyState === "loaded") {
     completed();
}