Javascript не выполняется внутри тени DOM

Я работаю над приложением, где я должен загрузить другие веб-страницы html на текущую страницу. Другие веб-страницы являются независимыми приложениями. Я пытаюсь загрузить веб-страницу в теневой DOM. Для этого я использовал ниже код, где он попытается импортировать test-template.html в shadowRoot. Здесь я не использую тег шаблона, потому что я должен динамически создавать шаблон (используя 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;

Do:

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

ответ

Смежные вопросы