Question

我正在开发一个应用程序，我可以将其他html网页加载到当前页面。其他网页是独立的应用程序。我正在尝试在shadow 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没有执行。有没有办法让脚本运行？如果是，请分享正在运行的示例。感谢。

Answer 1

要使<script>处于活动状态，您应首先将加载的文件插入<template>元素中。然后使用importNode()方法克隆模板的content并执行里面的脚本。

而不是：

shadowRoot.innerHTML = response;

执行：

var template = document.createElement( 'template' )
template.innerHTML = response 
shadowRoot.appendChild( document.importNode( template.content, true ) )

Javascript没有在影子DOM

1 个答案: