javascript之iframe

最新推荐文章于 2021-11-23 20:08:08 发布

weixin_34179762

最新推荐文章于 2021-11-23 20:08:08 发布

阅读量92

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000007090201

版权

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>

weixin_34179762

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript之iframe

iframe可以做的事情：实现跨域解决IE6下select遮挡不住的问题解决ajax的前进后退问题实现异步上传iframe基本知识iframe元素会创建包含另外一个文档的内联框架操作iframe1）隐藏iframe表框设置frameborder为0；<iframe frameborder="0" widt...
复制链接

扫一扫

javascript之iframe

iframe基本知识

操作iframe

“相关推荐”对你有帮助么？

`iframe`基本知识

操作`iframe`