HTML에 외부 페이지를 도입하는 방법(HTML 가져오기 방법) -HTML 튜토리얼-php.cn

HTML에 외부 페이지를 도입하는 방법(HTML 가져오기 방법) 

yulia

풀어 주다： 2018-09-25 16:42:58

원래의

12678명이 탐색했습니다.

페이지 레이아웃 중에 일부 외부 페이지가 HTML에 도입됩니다. 이 문서에서는 HTML 가져오기 방법을 사용하여 외부 페이지를 HTML에 도입하는 방법을 설명합니다. 도움이 필요한 친구들이 참고할 수 있으니 도움이 되길 바랍니다.

HTML 가져오기는 하나의 HTML 문서를 다른 HTML 문서에 포함하고 재사용하는 방법을 제공합니다. 현재 Google은 Opera 버전 35 이상에서 지원되는 HTML 가져오기를 완벽하게 지원하지만 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에 삽입하는 두 가지 방법이 제공됩니다.

마지막으로 document.querySelector 및 document.querySelectorAll을 간략하게 소개합니다. , 이 두 가지 방법은 Web API의 HTML5에 새로 도입되어 기본 Javascript 코드에서 요소 선택을 크게 단순화합니다.

document.querySelector 및 document.querySelectorAll은 모두 문자열을 매개변수로 받습니다. 이 매개변수는 CSS 선택 구문, 즉 태그, 클래스 선택기, ID 선택기(E[ type= "XX"]), 구조 선택기(:nth-child(n)) 등 의사 클래스 선택기는 지원되지 않습니다.

document.importNode(node,deep) 메소드는 적용을 위해 다른 문서의 노드를 이 문서에 복사합니다. 두 번째 값이 true이면 해당 노드의 모든 하위 노드도 복사됩니다.

node.cloneNode(deep): 기존 노드를 복제합니다. deep 값이 true이면 해당 하위 노드를 복제한다는 의미입니다. deep이 false이면 노드 자체만 복제됩니다.

위 내용은 HTML에 외부 페이지를 도입하는 방법(HTML 가져오기 방법) 의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!