How to introduce external pages into HTML (HTML imports method) -HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to introduce external pages into HTML (HTML imports method) 

yulia

Sep 25, 2018 pm 04:42 PM

During page layout, some external pages will be introduced into HTML. This article will tell you how to introduce external pages into HTML using the HTML imports method. Friends in need can refer to it, I hope it is useful to you.

HTML imports provide a way to include and reuse one HTML document in another HTML document. At present, Google has fully supported HTML imports. It is supported by Opera version 35 and later, but FF still does not support it. (Enter: chrome://flags in Google's address bar to enable or disable some functions). Although the current compatibility of HTML imports is not very good, we still need to understand how to use it. W3C has released a draft standard for HTML imports, and I believe it will be more commonly used in the future. Using HTML imports

<!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>

Copy after login

gives two ways to insert the parts we need in the imported html into the current html.

Finally, we briefly introduce document.querySelector and document.querySelectorAll. These two The method is a newly introduced method in HTML5 Web API, which greatly simplifies selecting elements in native Javascript code.

Document.querySelector and document.querySelectorAll both receive a string as a parameter. This parameter needs to comply with CSS selection syntax, namely: label, class selector, ID selector, attribute selector (E[type= "XX"]), structure selector (:nth-child(n)), etc. Pseudo-class selectors are not supported.

The document.importNode(node,deep) method copies a node from another document to this document for application. If the second value is true, then all descendant nodes of the node will also be copied.

node.cloneNode(deep): Clone an existing node. If the deep value is true, it means cloning its descendant nodes. If deep is false, only the node itself will be cloned.

The above is the detailed content of How to introduce external pages into HTML (HTML imports method) . For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn