1

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

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:

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.

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.

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.

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.

Thanks,

4

1 回答 1

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>
于 2018-09-16T11:36:09.133 回答