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>