Javascript внутри импорта HTML не влияет на импортированный HTML - PullRequest
Новая
       33

Javascript внутри импорта HTML не влияет на импортированный HTML

0 голосов
/ 14 сентября 2018

Я импортирую HTML-документ form.html из сценария, расположенного в моем файле index.html.

form.html - это, по сути, фрагмент HTML, а в нижней части html находится внутренний скрипт, который присоединяет html к основному документу:

После этого я ссылаюсь на внешний скрипт, который должен что-то делать с HTML в form.html. Однако это не может повлиять на Firefox.

Если я проверю <head> основного документа в инструментах разработчика Firefox, я могу увидеть «фрагмент документа», составленный и с правильным влиянием сценариев. Однако фактический импортированный HTML, который появляется в теле , не изменяется.

Я попытался вставить скрипт внизу form.html. Я также пытался использовать window.onload, чтобы прикрепить внешний скрипт к концу body основного документа, а также пытался использовать тег link согласно этого вопроса .

Не совсем уверен, что еще попробовать. Я хотел бы, чтобы скрипт был модульным и содержался внутри form.html, если это возможно, чтобы запрашивать его только при запросе этой HTML-страницы.

Спасибо

1 Ответ

0 голосов
/ 16 сентября 2018

При использовании полифилла HTML Imports обработка импортированного документа является только асинхронной. Поэтому вам следует дождаться события 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>
...