>  기사  >  웹 프론트엔드  >  인터페이스 높이를 변경하려면 js를 사용하여 iframe을 작동하세요.

인터페이스 높이를 변경하려면 js를 사용하여 iframe을 작동하세요.

php中世界最好的语言
php中世界最好的语言원래의
2018-04-17 16:46:402612검색

이번에는 js를 사용하여 iframe을 조작하여 인터페이스 높이를 변경하고, js를 사용하여 iframe을 조작하여 인터페이스 높이를 변경할 때의 주의사항을 알려드리겠습니다. 다음은 실제 사례입니다.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" value="页面1"/>
<input type="button" value="页面2"/>
<iframe id="iframePage" src="1.html" frameborder="0" scrolling="no"></iframe>
</body>
<script>
//  contentWindow所有浏览器支持,contentDocument IE不支持;  window.parant当前页面的父页面,window.top当前页面的最外层页面
//  iframe防钓鱼:if(window!=window.top){window.top.location.href=window.location.href} 如果最顶层页面不是当前页面,就把最顶层网址指向当前页面网址
    window.onload=function(){
        var oIframe=document.getElementById('iframePage');
        var aBtn=document.getElementsByTagName('input');
        changeHeight();
        function changeHeight(){
            setTimeout(function(){  //必须加一个延迟,不然高度改变会和页面加载冲突,事先不了高度变化
                oIframe.height=oIframe.contentWindow.document.body.offsetHeight;
            },100);
        }
        aBtn[0].onclick=function(){
            oIframe.src='1.html';
            changeHeight();
        };
        aBtn[1].onclick=function(){
            oIframe.src='2.html';
            changeHeight();
        };
    };
</script>
</html>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:



위 내용은 인터페이스 높이를 변경하려면 js를 사용하여 iframe을 작동하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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