집 > 기사 > 웹 프론트엔드 > HTML로 외부 페이지를 소개하는 방법

HTML로 외부 페이지를 소개하는 방법

小云云원래의: 2018-03-29 16:31:093160검색

일반적으로 웹사이트의 head, foot, rightBar(오른쪽 항목)는 동일합니다. 그렇지 않으면 수정해야 할 경우 10페이지, 20페이지 또는 그 이상의 페이지가 소개될 수 있습니다. 수정이 필요하지만 지루하지만 의미가 없는 작업입니다. PHP나 JSP의 도움으로 이 문제는 include를 사용하여 쉽게 해결할 수 있지만, 백엔드 언어에서 벗어나면 프런트엔드 관점에서도 이 문제를 해결할 수 있을까요?

1. iframe의 도움으로

먼저 생각하기 가장 쉬운 것은 html5가 프레임을 폐지했지만 여전히 iframe을 사용할 수 있다는 것입니다. 프레임보더 속성이 있고 속성 값을 0으로 설정합니다. 또는 아니요, iframe 테두리를 제거합니다. 그런 다음 스크롤을 아니오로 설정하십시오. 이는 완전히 가능하지만 서버 환경에서 실행해야 한다는 점을 기억하세요.

 var frame = document.getElementsByTageName("iframe")[0];
    frame.contentWindow.document.XXX方法,
    如frame.contentWindow.document.querySelector("#btn");//获取iframe中Id为btn的节点.

저는 iframe을 사용하여 헤더를 소개한 경험이 없기 때문에 헤더는 일반적으로 점프 외에 다른 기능도 있다는 점을 고려하면 페이지가 길 때 클릭하면 어딘가를 정확하게 찾을 수 있습니다. iframe을 사용하여 도입한 경우 페이지 이동은 효과가 없지만 앵커 포인트는 어떻습니까? 이것을 알기 위해서는 시도해 볼 필요가 있습니다.
여기에 앵커 포인트에 대한 지식을 추가하세요.
앵커 포인트는 현재 페이지의 해당 위치로 이동할 수 있고 다른 페이지의 해당 위치로 이동할 수도 있습니다.
앵커 포인트를 구현하는 방법에는 두 가지가 있는데, 하나는 태그 + 이름 속성을 사용하는 것이고, 다른 하나는 태그의 Id 속성을 사용하는 것입니다.
자세한 내용은 다음과 같습니다.
a 태그 + 이름 속성을 사용하세요

    <a href = "#detail">详情</a> 
    <a name = "detail"></a>

"세부정보"를 클릭하고 d39f3d78f2b78439de57b855cdb22445.5e8304ee35d55ad9c18145a21a3f6a74的位置.

b.使用标签的id属性

    <a href = "#detail">详情</a>
    <p id = "detail"></p>

点击”详情”，跳转到d1a8716bbca693382eab805d6bb06c9f的位置.

使用a+name的方式经常会出现锚点失效的情况，因此推荐使用id来绑定锚点。
言归正传，引入iframe之后，我们能否通过点击iframe中的元素来定位的相应的位置呢，这里，我们使用iframe引入head.html，这也是我最初的目的。
因此我们要实现的是:点击iframe的a标签，定位到主Html相应的位置,通过实现发现，单纯通过html是无法实现的，但是借助于JS则可以做到。

<!doctype html><html lang="en">
    <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>
        <!--css js 文件的引入-->
        <style>
            #leftFrame{display:block;}
        </style>
    </head>
    <body>          
        <p><img src = "img/photo1.jpg" width="500px"/></p>      
        <iframe src="test1.html" height= "100px" name="leftFrame" scrolling="No"  noresize="noresize"  id="leftFrame"></iframe>
        <p><img src = "img/photo2.jpg"  width="500px"/></p>
        <p><img src = "img/photo3.jpg" width="500px" /></p>
        <p id = "buttom">detail</p>
    </body></html><script>
    window.onload = function(){
        var iframe = document.querySelector("#leftFrame");        var bot = iframe.contentWindow.document.querySelector("#bot");        var top = iframe.contentWindow.document.querySelector("#top");
        bot.onclick = function(){
            document.body.scrollTop = document.body.offsetHeight;
        };
        top.onclick = function(){
            document.body.scrollTop = 0;
        };
    };</script>

iframe中有id为bot和top的元素。通过JS的方式实现定位。
在主页面中，通过iframe.contentWindow能够以HTML对象来返回iframe中的文档，可以通过所以标准的DOM方法来处理被返回的对象。
在iframe页面中，通过parent定位到父html,可以通过top定位到顶层的html.
同级iframe之间调用，需要先定位到父html，再定位到iframe.
补充点关于锚点的知识，其关键作用的就是连接地址后面加的#detail(detail仅是泛指).如果当前的url为localhost:8080/index.html.那么锚点之后，url应为localhost:8080/index.html#detail
URL地址末尾带有”#”标识符，表示需要跳转到对应的位置。#idName,浏览器会在页面中找到符合”#idName”特点的标签。如果URL中”#”后面跟随的字符在文中找不到，如果是当前页面，那么不跳转，如果是从其它页面跳转过来，则显示页面顶部。
回到页面顶部，除了可以通过JS设置body的scrollTop(0返回到顶部,设置为body的高度,跳转到顶部),另一种方法就是afeaa91bd55797efd28520d87cc51f8c回到顶部5db79b134e9f6b82c0b36e0489ee08ed

b. 태그의 id 속성을 사용하세요

 $(function(){
        $("selector1").load("page1.html");
        $("selector2").load("page2.html");
        $("selector3").load("page3.html");
    });

"Details"를 클릭하고 eb6e57d964924c85bfd31f6428bb2a1d 위치.

+이름 앵커 포인트를 자주 사용하세요 실패하므로 id를 사용하여 앵커 포인트를 바인딩하는 것이 좋습니다.

본론으로 돌아가서, iframe을 소개한 후 iframe의 요소를 클릭하여 해당 위치를 찾을 수 있나요? 여기서는 iframe을 사용하여 원래 목적이기도 한 head.html을 소개합니다.

그래서 우리가 달성하고자 하는 것은 iframe의 a 태그를 클릭하고 기본 HTML의 해당 위치를 찾는 것입니다. 구현을 통해 우리는 단순히 html을 통해서는 달성할 수 없지만 다음을 사용하여 수행할 수 있다는 것을 발견했습니다. JS의 도움.

<!doctype html><html lang="en">
    <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>
        <p id = "content"></p>
    </body></html><script>
    var post = document.querySelector("link[rel = &#39;import&#39;]").import;    var con = post.querySelector("p");
    document.querySelector("#content").appendChild(con.cloneNode(true));    var clone = document.importNode(con,true)
    document.querySelector("#content").appendChild(clone)</script>

🎜iframe에는 ID 봇과 상단이 있는 요소가 있습니다. 포지셔닝은 JS를 통해 이루어집니다. 🎜메인 페이지에서 iframe.contentWindow를 사용하면 iframe의 문서를 HTML 개체로 반환할 수 있으며, 반환된 개체는 모든 표준 DOM 메서드를 통해 처리할 수 있습니다. 🎜iframe 페이지에서는 parent를 통해 상위 html을 찾고, top을 통해 최상위 html을 찾을 수 있습니다. 🎜동일 레벨의 iframe 간 호출 시 먼저 상위 html을 찾은 다음 iframe을 찾아야 합니다. 🎜앵커 포인트에 대한 지식을 추가하세요. 주요 기능은 연결 주소 뒤에 추가된 #detail입니다(세부 사항은 일반적으로 이를 참조함). 현재 URL이 localhost:8080/index.html인 경우 앵커 포인트 뒤에는 url은 localhost:8080/index.html#이어야 합니다. 🎜URL 주소 끝에 있는 "#" 식별자는 해당 위치로 이동해야 함을 나타냅니다. #idName, 브라우저는 페이지의 "#idName" 특성과 일치하는 태그를 찾습니다. URL에서 "#" 뒤에 오는 문자를 텍스트에서 찾을 수 없는 경우, 현재 페이지라면 점프하지 않고 다른 페이지에서 점프하면 페이지 상단이 표시됩니다. 🎜페이지 상단으로 돌아가서 JS를 통해 본문의 scrollTop을 설정하는 것(0이 맨 위로 돌아가고 본문의 높이로 설정되고 맨 위로 점프) 외에 또 다른 메서드는 1bc638a560374c4df62424f6399d1a3c맨 위로>🎜🎜2 .ajax(jquery 로드 메소드)를 사용하여🎜🎜또 다른 방법은 jQuery의 로드 메소드를 사용하여 페이지를 로드하는 것입니다. 🎜load(url, data, callback); url은 로드할 HTML 웹페이지의 URL입니다. 데이터: 서버로 전송되는 키/값: 로드가 성공하면 콜백 함수입니다. 🎜rrreee🎜js를 통해 추가된 DOM 구조는 SEO(검색 엔진 최적화)에 영향을 미치며, 바이두 스파이더는 이를 크롤링할 수 없습니다! 일반적인 상황에서는 최후의 수단을 제외하고는 사용하지 않는 것이 좋습니다. page1.html/page2.html/page3.html에 로드되기 때문에 필요한 HTML 조각을 작성하면 됩니다. 즉, page1.html과 같은 페이지의 요소를 가져와야 하는 경우 다음에서 사용할 수 있습니다. 페이지가 로드되었는지 확인하기 위해 setTimeout과 결합합니다. 🎜

3、使用HTML imports

HTML imports提供了一种在一个HTML文档中包含和重用另一个HTML文档的方法。目前谷歌已经全面支持HTML imports，Opera35版本之后支持，但是FF依旧不支持。(在谷歌的地址栏输入:chrome://flags,启动或禁止一些功能)
尽管目前HTML imports的兼容不是很好，但是我们还是有必要了解其使用方法，W3C已经发布了HTML imports的标准草案，相信后期应该还是会用得比较普遍的。使用HTML imports

<!doctype html><html lang="en">
    <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>
        <p id = "content"></p>
    </body></html><script>
    var post = document.querySelector("link[rel = &#39;import&#39;]").import;    var con = post.querySelector("p");
    document.querySelector("#content").appendChild(con.cloneNode(true));    var clone = document.importNode(con,true)
    document.querySelector("#content").appendChild(clone)</script>

给出了两种将import进来的html中我们需要的部分插入到当前html.

最后简单介绍document.querySelector和document.querySelectorAll，这两个方法是HTML5在Web API中新引入的方法，大大简化了在原生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로 외부 페이지를 소개하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML의 코드 주석 정보다음 기사：HTML의 코드 주석 정보

HTML로 외부 페이지를 소개하는 방법

1. iframe의 도움으로

$(function(){ $("selector1").load("page1.html"); $("selector2").load("page2.html"); $("selector3").load("page3.html"); });

3、使用HTML imports

관련 기사