HTML に外部ページを導入する方法 (HTML インポート方法) -htmlチュートリアル-php.cn

HTML に外部ページを導入する方法 (HTML インポート方法) 

yulia

リリース： 2018-09-25 16:42:58

オリジナル

12730 人が閲覧しました

ページレイアウト中に、一部の外部ページが HTML に導入されます。この記事では、HTML インポートメソッドを使用して外部ページを HTML に導入する方法について説明します。困っている友達は参考にしていただければ幸いです。

HTML インポートは、ある HTML ドキュメントを別の HTML ドキュメントに含めて再利用する方法を提供します。現在、Google は HTML インポートを完全にサポートしていますが、Opera バージョン 35 以降ではサポートされていますが、FF はまだサポートしていません。 (一部の機能を有効または無効にするには、Google のアドレスバーに「chrome://flags」と入力します)。現在の HTML インポートの互換性はあまり良くありませんが、その使用方法を理解する必要があります。W3C は HTML インポートの標準草案をリリースしており、将来的にはより一般的に使用されるようになると思います。 HTML インポートを使用する

<!doctype html>
<html>
    <head>
    <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="Keywords" content="关键词一，关键词二">
        <meta name="Description" content="网站描述内容">
        <meta name="Author" content="Yvette Lau">       
        <title>Document</title>
        <link rel = "import" href = "test1.html"/>
    </head>
    <body>
        <div id = "content"></div>
    </body>
</html>
<script>
    var post = document.querySelector("link[rel = &#39;import&#39;]").import;
    var con = post.querySelector("div");
    document.querySelector("#content").appendChild(con.cloneNode(true));

    var clone = document.importNode(con,true)
    document.querySelector("#content").appendChild(clone)
</script>

ログイン後にコピー

では、インポートされた HTML に必要な部分を現在の HTML に挿入する 2 つの方法が提供されます。

最後に、document.querySelector と document.querySelectorAll について簡単に説明します。メソッドは、HTML5 Web API で新しく導入されたメソッドで、ネイティブ JavaScript コードでの要素の選択を大幅に簡素化します。

Document.querySelector と document.querySelectorAll はどちらもパラメーターとして文字列を受け取ります。このパラメーターは、CSS 選択構文、つまりラベル、クラスセレクター、ID セレクター、属性セレクター (E[type= "XX)" に準拠する必要があります。 "])、構造体セレクター (:nth-child(n)) など。疑似クラスセレクターはサポートされていません。

document.importNode(node,deep) メソッドは、アプリケーション用に別のドキュメントからこのドキュメントにノードをコピーします。2 番目の値が true の場合、ノードのすべての子孫ノードもコピーされます。

node.cloneNode(deep): 既存のノードのクローンを作成します。 deep 値は true です。これは、その子孫ノードのクローンを作成することを意味します。 deep が false の場合、ノード自体のみが複製されます。

以上がHTML に外部ページを導入する方法 (HTML インポート方法) の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。