1

現在のページに他の html Web ページをロードする必要があるアプリケーションに取り組んでいます。他の Web ページは独立したアプリケーションです。Shadow DOM で Web ページを読み込もうとしています。そのために、以下のコードを使用しました。ここでは、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 が実行されていません。スクリプトを実行する方法はありますか? はいの場合は、実行例を共有してください。ありがとう。

4

1 に答える 1

5

を<script>アクティブにするには、最初にロードされたファイルを<template>要素に挿入する必要があります。次に、テンプレートのimportNode()クローンを作成し、content内部のスクリプトを実行するメソッドを使用します。

それ以外の：

shadowRoot.innerHTML = response;

行う：

var template = document.createElement( 'template' )
template.innerHTML = response 
shadowRoot.appendChild( document.importNode( template.content, true ) )
于 2016-11-23T08:04:18.787 に答える