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

Я импортирую 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 ответ

Решение

При использовании полифилла 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>
Другие вопросы по тегам