Heim >Web-Frontend >HTML-Tutorial >So führen Sie externe Seiten in HTML ein (HTML-Importmethode)
So führen Sie externe Seiten in HTML ein (HTML-Importmethode)
- yuliaOriginal
- 2018-09-25 16:42:5812718Durchsuche
Während des Seitenlayouts werden einige externe Seiten in HTML eingeführt. In diesem Artikel erfahren Sie, wie Sie externe Seiten mithilfe der HTML-Importmethode in HTML einführen. Freunde in Not können darauf verweisen, ich hoffe, es ist für Sie nützlich.
HTML-Importe bieten eine Möglichkeit, ein HTML-Dokument in ein anderes HTML-Dokument einzubinden und wiederzuverwenden. Derzeit unterstützt Google HTML-Importe vollständig von Opera Version 35 und höher, FF unterstützt es jedoch immer noch nicht. (Geben Sie chrome://flags in die Adressleiste von Google ein, um einige Funktionen zu aktivieren oder zu deaktivieren.) Obwohl die aktuelle Kompatibilität von HTML-Importen nicht sehr gut ist, müssen wir noch verstehen, wie man sie verwendet. W3C hat einen Standardentwurf für HTML-Importe veröffentlicht, und ich glaube, dass er in Zukunft häufiger verwendet wird. Die Verwendung von HTML-Importen
<!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>bietet zwei Möglichkeiten, die Teile, die wir im importierten HTML benötigen, in das aktuelle HTML einzufügen
Abschließend stellen wir kurz vor document.querySelector und document.querySelectorAll Die Methode ist eine neu eingeführte Methode in der HTML5-Web-API, die die Auswahl von Elementen im nativen Javascript-Code erheblich vereinfacht.
Document.querySelector und document.querySelectorAll erhalten beide eine Zeichenfolge als Parameter. Dieser Parameter muss der CSS-Auswahlsyntax entsprechen, nämlich: Tag, Klassenselektor, ID-Selektor, Attributselektor (E[type= "XX "]), Strukturselektor (:nth-child(n)) usw. Pseudoklassenselektoren werden nicht unterstützt.
Die Methode document.importNode(node,deep) kopiert einen Knoten aus einem anderen Dokument zur Anwendung in dieses Dokument. Wenn der zweite Wert wahr ist, werden auch alle untergeordneten Knoten des Knotens kopiert.
node.cloneNode(deep): Klonen Sie einen vorhandenen Knoten. Der tiefe Wert ist wahr, was bedeutet, dass seine untergeordneten Knoten geklont werden. Wenn deep den Wert false hat, wird nur der Knoten selbst geklont.
Das obige ist der detaillierte Inhalt vonSo führen Sie externe Seiten in HTML ein (HTML-Importmethode) . Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!