javascript之iframe

2019年8月31日 172次阅读 来源: bottle_

iframe能够做的事变：

  • 完成跨域

  • 处理IE6下select遮挡不住的题目

  • 处理ajax的行进退却题目

  • 完成异步上传

iframe基本知识

iframe元素会建立包括别的一个文档的内联框架

操纵iframe

1）隐蔽iframe表框
设置frameborder为0；

<iframe frameborder="0" width="400" height="400" src="#" scrolling="no">
</iframe>

<body>
    <iframe frameborder="1" width="400" height="400" src="#" scrolling="no" id="myiframe">
    </iframe>
    <script>
        var myiframe = document.getElementById("myiframe");
        myiframe.style.border = "none"; // FF下有用，IE下无效
        myiframe.setAttribute("frameborder",0);//FF下有用，IE下无效
        myiframe.frameBorder = 0;//FF下有用，IE下无效
    </script>
</body>

2)动态建立iframe

<script>
    var obj = document.createElement("iframe");
    obj.frameborder = 0;
    obj.src ="http://blog.csdn.net/cuew1987";  
    obj.frameBorder = 0;//FF、IE隐蔽边框有用  
    obj.width = "400px";  
    obj.height = "400px";  
    obj.scrolling = "no";  
    document.body.appendChild(obj); 
</script>

3)猎取iframe

<script>
    var obj = document.getElementById("myiframe");  //可操纵iframe有关的属性，不能操纵内里的文档
    var obj = frames["myiframe"];
</script>

猎取iframe中的window对象

<script>
    function getIframeWindow(obj){
        return obj.contentWindow || obj.contentDocument.parentWindow;
    }
</script>

如果是猎取document对象，则

return obj.contentWindow.document || obj.contentDocument;

a>contentWindow 兼容各个浏览器，可获得子窗口的 window 对象。
b>contentDocument Firefox 支撑，> ie8 的ie支撑。可获得子窗口的 document 对象。

4)猎取iframe页面高度

function getIframeHeight(obj){  
    var idoc = getIframeWindow(obj).document;   
    if(idoc.body){  //W3C
        return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);     
    }else if(idoc.documentElement){  //IE
        return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);     
    }  
}

5)父子页面互访

子接见父：  
    parent.html:  
    <body>  
        <div>比及的信息：<div id="msg"></div></div>  
        <iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>  
    </body>  
    son.html:  
    <body>  
    <input type="button" onClick="setMsg()" value="setMsg">  
    <script>  
    function setMsg(){  
        var msg = window.parent.document.getElementById("msg");  
        msg.innerHTML= "Hello world!!";  
    }  
    </script>  
    </body>

父接见子：
parent.html:
<body>
    <div>比及的信息：<div id="setMsg"></div></div>  
    <input type="button" value="setMsg" onClick="setMsg()"><br>  
    <iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>  
    <script type="text/javascript">  
    function setMsg(){  
        var obj = document.getElementById("myiframe");  
        var msg = getIframeWindow(obj).document.getElementById("msg");  
        document.getElementById("setMsg").innerHTML = msg.innerHTML;  
    }  
    </script>  
</body>  
 son.html:  
<body>  
    <div id="msg">Hello world!!!</div>  
</body>
    原文作者：bottle_
    原文地址: https://segmentfault.com/a/1190000007090201
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞