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

Question

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

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

1

javascript jquery web-component shadow-dom html5-template

Источник

user2020844 22 ноя '16 в 07:45

1 ответ

Решение

Другие вопросы по тегам javascript jquery web-component shadow-dom html5-template

user4600982 23 ноя '16 в 08:04 2016-11-23 08:04 · Accepted Answer · 2016-11-23 08:04

Чтобы сделать <script> активный, вы должны сначала вставить загруженный файл в <template> элемент. Затем используйте importNode() метод, который будет клонировать content шаблона и выполнить скрипты внутри.

Вместо:

shadowRoot.innerHTML = response;

Делать:

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