我正在开发一个应用程序，我必须将其他 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 没有执行。有没有办法让脚本运行？如果是，请分享运行示例。 谢谢。
最佳答案
制作<script>事件，您应该首先将加载的文件插入 <template>元素。
然后使用 importNode()克隆 content 的方法模板并执行里面的脚本。
代替:
shadowRoot.innerHTML = response;
做:
var template = document.createElement( 'template' )
template.innerHTML = response
shadowRoot.appendChild( document.importNode( template.content, true ) )
关于Javascript 不在影子 DOM 中执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40736326/