Javascript不在shadow DOM中执行-Java 学习之路

我正在开发一个应用程序，我将其他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没有执行 . 有没有办法让脚本运行？如果是，请分享正在运行的示例 . 谢谢 .

1 回答

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

代替：
```
shadowRoot.innerHTML = response;
```
做：
```
var template = document.createElement( 'template' )
template.innerHTML = response 
shadowRoot.appendChild( document.importNode( template.content, true ) )
```
回复于 2024-05-03T03:15:17+08:00

Javascript不在shadow DOM中执行

1 回答

相关问题