1

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

这是 webcomponents.js 中的错误，还是 Firefox 中的错误？任何人都有解决方法的好主意（“使用 Polymer 或 Angular”除外）？

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

4

2 回答 2

1

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

这依赖于这样一个事实，即如果 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 请求，但它可行且简单。

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

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

于 2016-01-30T17:50:33.757 回答
1

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

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

有一个与该问题相关的问题已打开。

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

此外，您可以解析您<template>正在寻找的<script>标签并尝试手动激活/执行它们（可能有点棘手......）

于 2016-01-28T13:55:34.657 回答