JavaScript不執行內部陰影DOM

我正在一個應用程序，我必須加載其他HTML網頁到當前頁面。其他網頁是獨立的應用程序。我正在嘗試在影子DOM中加載網頁。爲此，我使用下面的代碼，它將嘗試在shadowRoot中導入test-template.html。這裏我沒有使用模板標籤，因爲我需要動態呈現模板（使用ajax）。JavaScript不執行內部陰影DOM

<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>

和測試template.html看起來就像這樣：

<div>Hello from template</div> 

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

我能夠加載上述試驗，template.html在我的當前頁面，但是測試模板內的JavaScript。 html沒有執行。有什麼辦法可以讓腳本運行嗎？如果是，請分享運行示例。謝謝。

來源

2016-11-22 durgesh.patle

要使<script>處於活動狀態，應首先將加載的文件插入<template>元素中。然後使用importNode()方法來克隆模板的content並執行裏面的腳本。

相反的：

shadowRoot.innerHTML = response;

務必：

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

來源

2016-11-23 08:04:18 Supersharp

謝謝你的回答，upvoted你的答案：對 –

JavaScript不執行內部陰影DOM

回答

相關問題