HTML导入中的Javascript不影响导入的HTML [英] Javascript inside HTML import not affecting imported HTML

查看:101
本文介绍了HTML导入中的Javascript不影响导入的HTML的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am importing an html document, form.html, from a script located in my index.html file.

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

form.html is a basically a fragment of HTML and at the bottom of the html is an internal script that attaches the html to the main document:

然后,我引用一个外部脚本,该脚本应该对form.html中的HTML进行一些处理.但是,这不会对Firefox产生影响.

Afterwards, I reference an external script that is supposed to do some stuff to the HTML in form.html. However, this fails to have an affect in Firefox.

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

If I inspect the <head> of the main document in Firefox developer tools, I can see the "document fragment" composed and with the correct scripting affect. However, the actual imported HTML that appears in the body is unaffected.

我尝试内联form.html底部的脚本.我还尝试使用window.onload将外部脚本附加到主文档的body末尾,以及尝试根据

I have tried inlining the script at the bottom of form.html. I also tried using window.onload to attach the external script to the end of the body of the main document as well as trying to use a link tag as per this question.

不太确定还有什么尝试.我想使脚本保持模块化并包含在form.html内,以便仅在请求该HTML页面时请求它.

Not quite sure what else to try. I would like to keep the script modular and contained inside form.html if possible as to only request it when that HTML page is requested.

谢谢

推荐答案

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

When using the HTML Imports polyfill, the processing of the imported document is only asynchronous. So you should wait for the HTMLImportsLoaded event or use the HTMLImports.whenReady() method to be sure the content was imported.

<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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆