Javascript inside HTML 导入不影响导入 HTML

Question

我正在从 index.html 文件中的脚本导入 html 文档 form.html。

form.html 基本上是 HTML 的一个片段，在 html 的底部是一个将 html 附加到主文档的内部脚本：

之后，我引用了一个外部脚本，它应该对 form.html 中的 HTML 做一些事情。但是，这对 Firefox 没有影响。

如果我在 Firefox 开发人员工具中检查主文档的 <head>，我可以看到 "document fragment" 组成并具有正确的脚本效果。但是，正文中出现的实际导入的HTML不受影响。

我已经尝试在 form.html 的底部内联脚本。我还尝试使用 window.onload 将外部脚本附加到主文档 body 的末尾，并尝试根据使用 link 标签。

不太确定还能尝试什么。如果可能的话，我想保持脚本模块化并包含在 form.html 中，以便仅在请求 HTML 页面时才请求它。

谢谢，

Answer 1

使用HTML Imports polyfill时，导入文档的处理只是异步的。因此，您应该等待 HTMLImportsLoaded 事件或使用 HTMLImports.whenReady() 方法来确保内容已导入。

<head>
    <script src="html-imports.min.js"></script>
    <link rel="import" src="from.html">
<body>
    //code to be injected
    <script>
        document.addEventListener( 'HTMLImportsLoaded' , ev => {
            //you can safely access the imported code in the body
        } )
    </script>

Javascript inside HTML 导入不影响导入 HTML

Javascript inside HTML import not affecting imported HTML

javascript

firefox

html-imports