ホームページ > 記事 > ウェブフロントエンド > HTML に外部ページを導入する方法 (HTML インポート方法)
HTML に外部ページを導入する方法 (HTML インポート方法)
- yuliaオリジナル
- 2018-09-25 16:42:5812666ブラウズ
ページ レイアウト中に、一部の外部ページが 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 = 'import']").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 サイトの他の関連記事を参照してください。