HTML模板和HTML导入-无法在Firefox中执行内部脚本 [英] HTML Templates and HTML Import - Inner Script not Executing in Firefox
问题描述
我正在使用webcomponents.js来填充Firefox对Web组件的支持.
I am using webcomponents.js to polyfill Firefox support of web components.
通过HTML导入加载HTML模板时，一旦将基于模板的自定义元素添加到主页的DOM中，模板中的脚本就不会执行.
When loading an HTML template through an HTML import, a script within the template does not execute once the custom-element based on the template is added to the DOM of the main page.
在Chrome中运行网站(支持本机Web组件)时，它会执行.
It does execute when running the site in Chrome (which has native web components support).
但是，当模板放置在主页本身中时，Firefox和Chrome都会执行此类脚本.
However, both Firefox and Chrome execute such script when the template is placed within the main page itself.
请参见Eric Bidelmann的示例，网址为 HTML5Rocks .只要模板位于同一HTML文件中，它就可以在Chrome和Firefox中运行(通过webcomponents.js).
See the example from Eric Bidelmann at HTML5Rocks. This runs both in Chrome and in Firefox (via webcomponents.js) - as long as the template is located in the same HTML file.
<!DOCTYPE html>
<html>
<body>
<button onclick="useIt()">Use me</button>
<div id="container"></div>
<script>
function useIt() {
var content = document.querySelector('template').content;
// Update something in the template DOM.
var span = content.querySelector('span');
span.textContent = parseInt(span.textContent) + 1;
document.querySelector('#container').appendChild(
document.importNode(content, true));
}
</script>
<template>
<div>Template used: <span>0</span></div>
<script>alert('Thanks!')</script>
</template>
</body>
</html>
但是显示模板文本时，通过HTML导入链接加载模板及其内容时，它不会运行.如前所述，它会加载内容，但不会在Firefox中执行脚本.
But while the template text shows, it does NOT run when loading the template and its content via a HTML import link. As mentioned, it loads the content, but isn't executing the script in Firefox.
这是webcomponents.js中的错误，还是Firefox中的错误? 是否有其他解决方法的好主意(使用Polymer或Angular"除外)?
Is this a bug in webcomponents.js, or a bug in Firefox? Anyone having a good idea for workarounds (other than "use Polymer or Angular")?
注意-这是基于使用Firefox 43和Chrome 47.
Note - this is based on using Firefox 43 and Chrome 47.
推荐答案
这不是Firefox中的错误，Internet Explorer 11具有相同的行为(与 webcomponents.js 相同).
It is not a bug in Firefox, Internet Explorer 11 has the same behaviour (with webcomponents.js).
importNode方法未由 webcomponents.js 填充.这就是导入元素时未激活<script>元素的原因.
The importNode method is not polyfilled by webcomponents.js. That's why <script> elements are not activated when they are imported.
存在与该问题相关的问题.
我的解决方法:我没有在导入的<template>(JS/HTML分隔:)内插入脚本标签<script>.
My workaround: I don't insert scripts tags <script> inside an imported <template> (JS/HTML separated:).
此外，您可以解析<template>来寻找<script>标签，并尝试手动激活/执行它们(可能有些棘手...)
Also, you could parse your <template> looking for <script> tags and try to activate/execute them manually (could be somewhat tricky...)
这篇关于HTML模板和HTML导入-无法在Firefox中执行内部脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
