HTML 模板和 HTML 导入 - Firefox 中不执行内部脚本

Question

我正在使用 webcomponents.js 填充 Firefox 对 Web 组件的支持。

通过 HTML 导入加载 HTML 模板时，一旦将基于模板的自定义元素添加到 DOM 中，模板中的脚本就不会执行主页.

它确实在运行在 Chrome（具有本机 Web 组件支持）中设置站点时执行。

但是，当模板放在主页本身时，Firefox 和 Chrome 都会执行这样的脚本。

请参阅 HTML5Rocks 上 Eric Bidelmann 的示例。 Chrome 和 Firefox（通过 webcomponents.js）中的运行 - 只要模板位于同一个 HTML 文件中。

<!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 导入 link 加载模板及其内容时，它不会运行。如前所述，它会加载内容，但不会在 Firefox 中执行脚本。

这是 webcomponents.js 中的错误还是 Firefox 中的错误？任何人有解决方法的好主意（"use Polymer or Angular" 除外）？

注意 - 这是基于使用 Firefox 43 和 Chrome 47.

Answer 1

这不是 Firefox 中的错误，Internet Explorer 11 具有相同的行为（webcomponents.js）。

importNode 方法未被 webcomponents.js 填充。这就是 <script> 元素在导入时未激活的原因。

有一个 issue opened 与该问题有关。

我的解决方法：我不在导入的 <template> 中插入脚本标签 <script>（JS/HTML 分隔：）。

此外，您可以解析 <template> 寻找 <script> 标签并尝试 activate/execute 手动它们（可能有点棘手。 ..)

Answer 2

我确实找到了解决此问题的方法，它允许在激活模板元素时执行脚本。

这依赖于 HTML 导入位于导入文件中的执行脚本，如果它们不在模板标签内的话。所以解决方案是在导入文件中再添加一个 HTML 导入并将脚本作为外部资源加载 - 一旦模板激活并立即执行，它就会加载。

所以不要在外部导入文件中包含以下内容：

<template>
  <div>Template used: <span>0</span></div>
  <script>alert('Thanks!')</script>
</template>

你有这个：

<template>
  <div>Template used: <span>0</span></div>
  <link rel="import" href="script1.html">
</template>

引用的 script1.html 文件包含以下内容：

  <script>
      alert('Thanks!')
  </script>

是的，又是一个 HTTP 请求，但它可行且简单。

这解决了在模板元素初始化时必须运行的任何脚本。稍后激活所需的脚本可以根据函数定义或内联脚本具体化。

注：
另一种解决方法是在带有 id="script1" 的模板部分下方（和外部）的外部导入文件中添加一个 "div" 标记，然后使用一些 JS 来提取 div 的内容并将脚本标签添加到模板中。由于您无论如何都需要 JS 来激活模板，因此变化不大，但这感觉更像是 hack。

HTML 模板和 HTML 导入 - Firefox 中不执行内部脚本

HTML Templates and HTML Import - Inner Script not Executing in Firefox

javascript

html

firefox

web-component

html5-template