HTML로 외부 페이지를 소개하는 방법(iframe 태그 방식)-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML로 외부 페이지를 소개하는 방법(iframe 태그 방식)

yulia

Sep 25, 2018 pm 04:29 PM

html iframe

페이지 레이아웃 중에 일부 외부 페이지가 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"를 클릭하면 위치로 이동합니다.b.

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

로그인 후 복사

"Details"를 클릭하고

위치로 이동합니다.

+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이 맨 위로 돌아가고 본문의 높이로 설정되고 맨 위로 점프) 외에 페이지 상단으로 돌아가는 방법은 맨 위로 돌아가기

위 내용은 HTML로 외부 페이지를 소개하는 방법(iframe 태그 방식)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.