在 Iframe 中加载 XSLTProcessor::transformToDocument() 的输出时未执行 Javascript答案

【问题标题】：Javascript not executed when loading output of XSLTProcessor::transformToDocument() in an Iframe在 Iframe 中加载 XSLTProcessor::transformToDocument() 的输出时未执行 Javascript
【发布时间】：2018-09-11 09:15:39
【问题描述】：

我正在将 XSLTProcessor::transformToDocument() 的输出 (HTMLDocument) 加载到 Iframe 中。

HTML 已正确呈现，但输出中的 Javascript 未执行/触发（以下是 FF 检查器输出）

<iframe id="output-frame"></iframe>
#document
<html> 
   <head></head>    
   <body onload="console.log('hello')">Hello</body>
</html>

如果我改为引用静态 html 文件，它工作正常：

<iframe id="output-frame" src="iframe.html"></iframe>
#document
<html> 
   <head></head>    
   <body onload="console.log('hello')">Hello</body>
</html>

是否有一种技术可以显式触发内部 javascript？

问题可能来自technique I'm using 将 HTMLDocument 加载到 Iframe 中：

var doc = xsltProcessor.transformToDocument(xml);
var frame = document.getElementById("output-frame");
var destDocument = frame.contentDocument;
var srcNode = doc.documentElement;
var newNode = destDocument.importNode(srcNode, true);
destDocument.replaceChild(newNode, destDocument.documentElement);

我真的不需要使用Iframe，我可以用transformToDocument()的结果替换当前页面。

我正在FF62中测试。

[更新] 我找到了看起来相关的 External JavaScript doesn't work in iFrames?。

我试图在 iframe 上指定一个相同的源 src（稍后将被我的转换输出覆盖）但它没有帮助。

有人知道如何在 FF 中记录“同源”违规/冲突吗？

【问题讨论】：

有旧的 DOM Level 0 方式 destDocument.open(); destDocument.write(new XMLSerializer().serializeToString(doc)); destDocument.close();。
w3.org/TR/html52/… 建议如果您使用 transformToFragment，则在插入文档时执行 XSLTProcessor 创建的脚本元素可能会更成功。
非常感谢@MartinHonnen - 您的第一个选项工作正常，我实际上可以用它替换父页面并摆脱我的框架。

标签： javascript html xslt

【解决方案1】：

这是一个解决方案，可让您将 iframe 的源设置为您想要的任何对象（包括由XSLTProcessor::transformToDocument() 创建的 HTML 文档）。

创建一个Blob 对象并将其传递给URL.createObjectURL(blob)
将您的 iframe src 设置为返回的 url

浏览器将获取指定的资源并像其他任何资源一样处理它。对于 HTML 文档，这意味着包含的 <script> 或 <style> 元素将按照您的预期进行评估。

对于您的具体用例，它看起来像这样：

let xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);

let htmlDoc = xsltProcessor.transformToDocument(xml);
let htmlDocStr = new XMLSerializer().serializeToString(htmlDoc);

const getBlobURL = (code, type) => {
    const blob = new Blob([code], { type })
    return URL.createObjectURL(blob)
}

document.getElementById("my-iframe").src = getBlobURL(htmlDocStr, 'text/html');

查看this blog post 了解一些背景信息。

【讨论】：