HTML 导入中的 Javascript 不影响导入的 HTML

标签 javascript firefox html-imports

我正在导入一个 html 文档,form.html ,来自位于我的 index.html 中的脚本文件。

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

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

如果我检查 <head>在 Firefox 开发人员工具的主文档中,我可以看到“文档片段”的组成和正确的脚本效果。但是,出现在body 中的实际导入的 HTML 不受影响。

我已经尝试在 form.html 的底部内联脚本.我也尝试使用 window.onload将外部脚本附加到 body 的末尾主文档以及尝试使用 link根据 this question 标记.

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

谢谢,

最佳答案

使用 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>

关于HTML 导入中的 Javascript 不影响导入的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52323587/

相关文章:

javascript - 比较 $injector 和显式创建的注入(inject)器

javascript - 嵌套元素(Web 组件)无法获取其模板

polymer - 在延迟加载的应用程序部件之间共享行为

javascript - 编辑页面的 <body> 时无法在 Firefox 中单击按钮

javascript - 如何在另一个应用程序中访问实际的 React 渲染的 DOM?

javascript - 将两个字符串数组合并为一个对象数组

javascript - 使用特殊字符 javaScript 对数组进行排序

javascript - 如何在分配给数组索引的对象上调用方法?

javascript - 无法在 Firefox 中使用 jQuery 脚本

javascript - 如何在 Firebug 中调试 Greasemonkey 脚本?