Question

我尝试使用JS在页面中加载网页组件，让我可以插入我的代码，但不会修改<head>的内容。

<script type="text/javascript">
  var script = document.createElement("script");
  script.src = "https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.min.js";

  var link = document.createElement("link");
  link.rel = "import";
  link.href = "https://my-cdn.com/build/my-widget.html";

  [script, link].forEach(function(element) {
    document.head.appendChild(element);
  });
</script>

但是，这会在添加script标记本身时引发以下错误：

webcomponents-lite.min.js：12未捕获TypeError：window.wrap不是函数（...）`

在script内使用等效link和head标记的纯HTML页面工作正常！知道我怎么能做到这一点？该页面确实预加载了jQuery，因此我可以根据需要使用jQuery - 但这对我来说似乎相当简单，所以尝试了一个纯JS解决方案。

Answer 1

确实如果错误是由于与另一个全球wrap的冲突造成的，那就很烦人了:-(

也许您可以尝试以下解决方案之一：

在追加wrap：<script>之前取消定义var wrap = undefined变量，但如果在其他地方预期，重新定义它可能不是一个好主意;
使用其他等效的polyfill：https://github.com/WebReflection/document-register-element;
重命名当前polyfill中的window.wrap函数。人们可以想象的更容易（11次发生，你可以重命名为wrap2）。

使用JavaScript的appendChild将Polymer Web组件注入头部

1 个答案: