1

我正在开发一个应用程序，我必须将其他 html 网页加载到当前页面。其他网页是独立的应用程序。我正在尝试在影子 DOM 中加载网页。为此，我使用了下面的代码，它将尝试在 shadowRoot 中导入 test-template.html。这里我没有使用模板标签，因为我必须动态渲染模板（使用 ajax）。

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
     <input type="button" onclick="loadTemplate()" value="Load template">
     <div id="template-holder"></div>
     <script>
     function loadTemplate() {
      var templateUrl = "test-template.html",
      templateReceivedCallback = function(response) {
         var div = document.getElementById('template-holder'),
            shadowRoot = div.attachShadow({
                mode: 'open'
            });
        shadowRoot.innerHTML = response;
      };
     $.get(templateUrl, templateReceivedCallback);
     }
  </script>
 </body>

test-template.html 看起来像这样：

  <div>Hello from template</div>

 <script>
     alert("this text is from script inside of template")
 </script>

我可以在当前页面中加载提到的 test-template.html，但是 test-template.html 中的 javascript 没有执行。有没有办法让脚本运行？如果是，请分享运行示例。谢谢。

4

1 回答 1

5

要<script>激活，您应该首先将加载的文件插入到<template>元素中。然后使用importNode()将克隆content模板的方法并执行其中的脚本。

代替：

shadowRoot.innerHTML = response;

做：

var template = document.createElement( 'template' )
template.innerHTML = response 
shadowRoot.appendChild( document.importNode( template.content, true ) )
于 2016-11-23T08:04:18.787 回答