すべてがうまくいってもimportNodeが実行されないのはなぜですか？

HTMLインポートを使用したいので、2つのファイルを作成しました。
はFile1：すべてがうまくいってもimportNodeが実行されないのはなぜですか？

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     div { 
      height: 300px; 
      width: 300px; 
      background-color: yellow; 
     } 
    </style> 
</head> 
<body> 
    <div></div> 
</body> 
</html>

File2の：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel='import' href='test.html' id='LINK'> 
    <script> 
     var LINK = document.getElementById('LINK'); 
     var test = LINK.import; 
     var content = document.importNode(test.content, true); 
     document.body.appendChild(content); 

    </script> 
</head> 
<body>   
</body> 
</html>

私はファイル2を実行したときに、私は黄色の四角形が表示されるはずですが、代わりに、私はこのエラーを取得しています：

Uncaught TypeError: Failed to execute 'importNode' on 'Document': parameter 1 is not of type 'Node'. at Import.html:8

I "test"変数をコンソールに記録し、File1を含むドキュメントを取得しているので、そこに問題はありません。私はエラーが何を意味するのか、なぜそれが機能しないのか分からない。

出典

2017-07-08 CodeMaker

あなたは間違って 'import'を使用しています。 Webページ全体ではなく、Webページの「断片」をインポートする必要があります。 –

@ScottMarcusだから私はそれをどうやってやるの？私は掘ったチュートリアルからこのコードを使用しています。 – CodeMaker

あなたが書いた：

var content = document.importNode(test.content, true);

...あなたはtestが<template>要素であると仮定します。

インポートするドキュメントには、<template>要素が必要です。

test.htmlというメインファイルで

<html> 
<head> 
    <style> 
     div { 
      height: 300px; 
      width: 300px; 
      background-color: yellow; 
     } 
    </style> 
</head> 
<body> 
    <template><div></div></template> 
</body> 
</html>

、テンプレートを取得するにはquerySelector()（または別のセレクタ機能）を使用します。

var LINK = document.getElementById('LINK'); 
var test = LINK.import.querySelector('template'); 
var content = document.importNode(test.content, true); 
...

出典

2017-07-09 17:29:30 Supersharp

すべてがうまくいってもimportNodeが実行されないのはなぜですか？

答えて

関連する問題