Comment introduire des pages externes dans HTML (méthode d'importation HTML) -tutoriel HTML-php.cn

Comment introduire des pages externes dans HTML (méthode d'importation HTML) 

yulia

Libérer： 2018-09-25 16:42:58

original

12730 Les gens l'ont consulté

Lors de la mise en page, certaines pages externes seront introduites dans HTML. Cet article vous expliquera comment introduire des pages externes dans HTML à l'aide de la méthode d'importation HTML. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile.

Les importations HTML permettent d'inclure et de réutiliser un document HTML dans un autre document HTML. À l'heure actuelle, Google prend entièrement en charge les importations HTML, qui sont prises en charge par Opera version 35 et ultérieure, mais FF ne les prend toujours pas en charge. (Entrez : chrome://flags dans la barre d'adresse de Google pour activer ou désactiver certaines fonctions). Bien que la compatibilité actuelle des importations HTML ne soit pas très bonne, nous devons encore comprendre comment l'utiliser. Le W3C a publié un projet de norme pour les importations HTML, et je pense qu'il sera plus couramment utilisé à l'avenir. L'utilisation des importations 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>

Copier après la connexion

donne deux façons d'insérer les parties dont nous avons besoin dans le HTML importé dans le HTML actuel

Enfin, nous présentons brièvement document.querySelector et document.querySelectorAll, qui. Les deux méthodes sont nouvellement introduites dans l'API Web HTML5, ce qui simplifie grandement la sélection d'éléments dans le code Javascript natif.

Document.querySelector et document.querySelectorAll reçoivent tous deux une chaîne en paramètre. Ce paramètre doit être conforme à la syntaxe de sélection CSS, à savoir : balise, sélecteur de classe, sélecteur d'ID, sélecteur d'attribut (E[type= "XX". "]), sélecteur de structure (:nth-child(n)), etc. Les sélecteurs de pseudo-classe ne sont pas pris en charge.

La méthode document.importNode(node,deep) copie un nœud d'un autre document vers ce document pour application. Si la deuxième valeur est vraie, alors tous les nœuds descendants du nœud seront également copiés.

node.cloneNode(deep) : Cloner un nœud existant. La valeur profonde est vraie, ce qui signifie cloner ses nœuds descendants. Si deep est faux, seul le nœud lui-même sera cloné.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!