Javascriptがシャドウ内で実行されていませんDOM

私は現在のページに他のHTML Webページをロードするアプリケーションで作業しています。他のウェブページは独立したアプリケーションです。私は影のDOMでWebページを読み込もうとしています。そのために私はshadowRootでtest-template.htmlをインポートしようとする以下のコードを使用しました。私はテンプレートを動的にレンダリングしなければならないので、ここではテンプレートタグを使用していません（Using ajax）。Javascriptがシャドウ内で実行されていませんDOM

<div>Hello from template</div> 

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

は私が私の現在のページに記載されたテストtemplate.htmlをロードすることができていますが、テスト・テンプレートの内側のjavascript：

<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は次のようになります。 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：P –

Javascriptがシャドウ内で実行されていませんDOM

答えて

関連する問題