HTML로 외부 페이지를 소개하는 방법(iframe 태그 방식)
- yulia원래의
- 2018-09-25 16:29:323785검색
페이지 레이아웃 중에 일부 외부 페이지가 HTML에 도입됩니다. 이 문서에서는 외부 페이지의 iframe 태그 방법을 HTML에 도입하는 방법에 대해 설명합니다. 도움이 필요한 친구들이 참고할 수 있으니 도움이 되길 바랍니다.
먼저 생각하기 쉬운 것은 iframe을 사용하는 것입니다. html5는 프레임을 폐지했지만 여전히 iframe을 사용할 수 있습니다. 제거하려면 속성 값을 0으로 설정하세요. iframe의 테두리. 그런 다음 스크롤을 아니오로 설정하십시오. 이는 완전히 가능하지만 서버 환경에서 실행해야 한다는 점을 기억하세요.
var frame = document.getElementsByTageName("iframe")[0];
frame.contentWindow.document.XXX方法,
如frame.contentWindow.document.querySelector("#btn");//获取iframe中Id为btn的节点.123저는 iframe을 사용하여 헤더를 소개한 경험이 없기 때문에 헤더는 일반적으로 점프 외에 다른 기능도 있다는 점을 고려하면 페이지가 길 때 클릭하면 어딘가를 정확하게 찾을 수 있습니다. iframe을 사용하여 도입한 경우 페이지 이동은 효과가 없지만 앵커 포인트는 어떻습니까? 이것을 알기 위해서는 시도해 볼 필요가 있습니다.
여기에 앵커 포인트에 대한 지식을 추가하세요.
앵커 포인트는 현재 페이지의 해당 위치로 이동할 수 있고 다른 페이지의 해당 위치로 이동할 수도 있습니다.
앵커 포인트를 구현하는 방법에는 두 가지가 있는데, 하나는 태그 + 이름 속성을 사용하는 것이고, 다른 하나는 태그의 Id 속성을 사용하는 것입니다.
자세한 내용은 다음과 같습니다.
a 태그 + 이름 속성을 사용하세요
<a href = "#detail">详情</a> <a name = "detail"></a>12
"Details"를 클릭하면 d39f3d78f2b78439de57b855cdb22445 위치로 이동합니다.b.
<a href = "#detail">详情</a> <div id = "detail"></div>12
"Details"를 클릭하고 700814910a0bb0f3fa58e1f941cbe817 위치로 이동합니다.
+name을 사용하면 앵커 포인트가 실패하는 경우가 많기 때문에 id를 사용하는 것이 좋습니다. 앵커 포인트를 바인딩합니다.
본론으로 돌아가서, iframe을 소개한 후 iframe의 요소를 클릭하여 해당 위치를 찾을 수 있나요? 여기서는 iframe을 사용하여 원래 목적이기도 한 head.html을 소개합니다.
그래서 우리가 달성하고자 하는 것은 iframe의 a 태그를 클릭하고 기본 Html의 해당 위치를 찾는 것입니다. 구현을 통해 단순히 HTML을 통해서는 달성할 수 없다는 것을 알았습니다. JS의 도움.
<!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>
<!--css js 文件的引入-->
<style>
#leftFrame{display:block;}
</style>
</head>
<body>
<div><img src = "img/photo1.jpg" width="500px"/></div>
<iframe src="test1.html" height= "100px" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"></iframe>
<div><img src = "img/photo2.jpg" width="500px"/></div>
<div><img src = "img/photo3.jpg" width="500px" /></div>
<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 봇과 상단이 있는 요소가 있습니다. 포지셔닝은 JS를 통해 이루어집니다.
메인 페이지에서는 iframe에 포함된 문서를 iframe.contentWindow를 통해 HTML 객체로 반환할 수 있으며, 반환된 객체는 모든 표준 DOM 메소드를 통해 처리할 수 있습니다.
iframe 페이지에서 parent를 통해 상위 html을 찾고, top을 통해 최상위 html을 찾을 수 있습니다.
동일한 레벨의 iframe 간 호출 시 먼저 상위 html을 찾은 후
앵커에 대한 추가 사항 포인트 지식, 핵심 역할은 연결 주소 뒤에 추가된 #detail입니다(세부 사항은 일반적인 참조일 뿐입니다). 그러면 앵커 포인트 뒤에 있습니다. , URL은 localhost:8080/index .html#detail이어야 합니다.
URL 주소 끝에는 해당 위치로 이동해야 함을 나타내는 "#" 식별자가 있습니다. #idName, 브라우저는 페이지의 "#idName" 특성과 일치하는 태그를 찾습니다. URL에서 "#" 뒤에 오는 문자가 텍스트에 없는 경우, 현재 페이지라면 점프하지 않고 다른 페이지에서 점프하면 페이지 상단이 표시됩니다.
JS를 통해 본문의 scrollTop을 설정하는 것(0이 맨 위로 돌아가고 본문의 높이로 설정되고 맨 위로 점프) 외에 페이지 상단으로 돌아가는 방법은 783a68c64b6064f1684a8fe4aee042e1 맨 위로 돌아가기5db79b134e9f6b82c0b36e0489ee08ed
위 내용은 HTML로 외부 페이지를 소개하는 방법(iframe 태그 방식)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!