使用JavaScript's appendChild向head中注入一个聚合物web组件

Injecting a Polymer web-component into head with JavaScript's appendChild

本文关键字：一个 组件 web 聚合物 注入 JavaScript head appendChild 使用      更新时间：2023-09-26

我试图使用JS在一个页面中加载一个web组件，让我插件我的代码，但不修改<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 Uncaught TypeError: window. js换行不是一个函数(…)'

在head内具有等效script和link标签的普通HTML页面工作得很好!知道我该怎么做吗?该页面预加载jQuery，所以我能够使用jQuery，如果需要-但这似乎相当微不足道的我，所以我尝试了一个纯js的解决方案。

如果错误是由于与另一个全局wrap冲突，这是令人讨厌的:-(

)

也许你可以试试这些方法:

  • 在附加<script>: var wrap = undefined之前取消定义wrap变量，但如果在其他地方期望重新定义它可能不是一个好主意;
  • 使用另一个等效的填充材料:https://github.com/WebReflection/document-register-element;
  • 重命名当前多边形中的window.wrap函数。这比想象中更容易(11次出现，您可以将其重命名为wrap2)。
相关文章：