2017-09-25 11 views
0

私は自分の会社用の新しいイントラネットをコーディングしていて、同じページにたくさんのファイルをインポートしたいので、情報は簡単に編集できます。しかし、Visual Studioではなくファイルを直接開こうとすると、ファイルはインポートされません。htmlインポートが機能しない

私はこれを書いた方法に何か問題がありますか、それとも別の理由でうまくいかないのですか?

<link rel="import" href="/Example.html"> 
<script> 
    var link = document.querySelector('link[rel="import"][href="/Example.html"]'); 
    var content = link.import; 
    var el = content.querySelector('#Example'); 
    document.body.appendChild(el.cloneNode(true)); 
</script> 

編集:これは、インポートするための非常に簡単で効果的な方法を持っているとして、HTMLの輸入と同じ問題に直面している人には、さらなる研究の後、私はMVCフレームワークを使用してお勧めします。

+1

http://caniuse.com/#search=import ...よりInformation..Goについては

enter image description here

? – CBroe

答えて

0

手始めに、あなたはまだかなり限られているHTMLの輸入のためにそのブラウザのサポートを知っている必要があります。 Google Chromeはバージョン31以降サポートを受けていますが、手動でこの機能を有効にする必要があります。 ChromeでHTMLインポートを有効にするには、chrome:// flagsに移動し、HTMLインポートを有効にするフラグを有効にします。完了したら、画面の下部にある[今すぐ再送信]ボタンをクリックして、HTMLインポートのサポートを使用してChromeを再起動します。

ブラウザがすべて設定されたので、ウェブページ内のインポートをどのように使用するかを見てみましょう。

HTMLインポートでは、インポートするファイルを参照するために要素を使用します。これはスタイルシートをどのように組み込むかと同じように機能します。参照属性を文書にインポートする必要があることをブラウザに示すには、rel属性をimportに設定してください。このlink

+0

この方法を提案していただきありがとうございますが、「HTMLインポートを有効にする」はありません。私は確信していませんが、これはHTMLのインポートがクロムに​​ネイティブであることを意味するかもしれないと考えています。 – Riley

0

ほとんどのブラウザは、まだバージョン以降のバージョン36とOpera以来、HTMLの輸入、Chromeのみをサポートしていない23

出典:http://caniuse.com/#feat=imports

+0

私に教えていただきありがとうございます、私は今、クロムを更新し、最新です。しかし、私は残念ながらそれはまだ読み込まれていないの同じ問題を抱えています。 – Riley

+0

はい、正しいですが、クロム設定でHTMLのインポートを有効にする必要があります。 – Amorandron

+0

私はchrome://フラグとクロム設定の両方を調べて、有効にする必要があるものを見つけることができませんでした。ガイダンスとして使用できるイメージがありますか? – Riley

0

あなたは単にあなたに別のHTMLページが含まれるようにjQueryのを使用することができます。 <link>タグは、外部CSSスタイルシートをHTMLドキュメントにリンクするために使用されます。

は、このコードを追加し、あなたのHTMLページがexample.html命名されたとします

<html> 
    <head> 
    <script src="/path/to/your/jquery.js"></script> 
    <script> 
    $(function(){ 
     $("#includemyHTML").load("Example.html"); 
    }); 
    </script> 
    </head> 

    <body> 
    <div id="includemyHTML"></div> 
    </body> 
</html> 
+0

間違ったファイルを読み込んでいます。 "HTMLページの名前がdemo.html"、 ".load(" Example.html ");" :) – Adriani6

関連する問題