일반적으로 웹사이트의 head, foot, rightBar(오른쪽 항목)는 동일합니다. 그렇지 않으면 수정해야 할 경우 10페이지, 20페이지 또는 그 이상의 페이지가 소개될 수 있습니다. 수정이 필요하지만 지루하지만 의미가 없는 작업입니다. PHP나 JSP의 도움으로 이 문제는 include를 사용하여 쉽게 해결할 수 있지만, 백엔드 언어에서 벗어나면 프런트엔드 관점에서도 이 문제를 해결할 수 있을까요?
먼저 생각하기 가장 쉬운 것은 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>"세부정보"를 클릭하고 <a name = "detail">.<a name = "detail">的位置.
b.使用标签的id属性
<a href = "#detail">详情</a>
<p id = "detail"></p>点击”详情”，跳转到<p id = "detail">的位置.
使用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的高度,跳转到顶部),另一种方法就是<a href = "#">回到顶部</a>
$(function(){
$("selector1").load("page1.html");
$("selector2").load("page2.html");
$("selector3").load("page3.html");
});<p id = "detail"> 위치.
+이름 앵커 포인트를 자주 사용하세요 실패하므로 id를 사용하여 앵커 포인트를 바인딩하는 것이 좋습니다.
그래서 우리가 달성하고자 하는 것은 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 = 'import']").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><a href = "#">맨 위로</a>🎜🎜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과 결합합니다. 🎜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 = 'import']").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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
