dur*_*tle 1 javascript jquery web-component shadow-dom html5-template
我正在开发一个应用程序,我将其他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没有执行.有没有办法让脚本运行？如果是,请分享正在运行的示例.谢谢.
要<script>激活,应首先将加载的文件插入<template>元素中.然后使用importNode()克隆content模板的方法并执行里面的脚本.
代替:
shadowRoot.innerHTML = response;
做:
var template = document.createElement( 'template' )
template.innerHTML = response
shadowRoot.appendChild( document.importNode( template.content, true ) )