recherche

Maison >interface Web >js tutoriel >Utilisez js pour utiliser iframe afin de modifier la hauteur de l'interface

Utilisez js pour utiliser iframe afin de modifier la hauteur de l'interface

php中世界最好的语言
php中世界最好的语言original
2018-04-17 16:46:402626parcourir

Cette fois, je vais vous expliquer quelles sont les précautions pour utiliser js pour faire fonctionner iframe afin de modifier la hauteur de l'interface, et comment utiliser js pour faire fonctionner iframe pour modifier la hauteur de l'interface. cas, jetons un coup d'oeil. 

<!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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :



Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des étapes de synchronisation de js et de l'heure du serveurArticle suivant：Explication détaillée des étapes de synchronisation de js et de l'heure du serveur

Articles Liés

Voir plus