<< Carrot2 - Open Source Search Results Clustering Engine | 首页 | Chart.js Documentation >>

iframe框架取值兼容ie/firefox/chrome的写法 - 菩提树下的杨过 - 博客园

<iframe name="frame1" id="frame1" src="frm.html" frameborder="1" height="30"></iframe>
<p>
    iframe1中文本框的值:
</p>
<p>
    
<input type="button" name="Submit" value="getValue" onclick="getValue()" />
</p>

<script type="text/javascript">
function getValue(){
    
var ofrm1 = document.getElementById("frame1").document;    
    
if (ofrm1==undefined)
    {
        ofrm1 
= document.getElementById("frame1").contentWindow.document;
        
var ff = ofrm1.getElementById("txt1").value;
        alert(
"firefox/chrome取值结果为:" + ff);
    }
    
else
    {
        
var ie = document.frames["frame1"].document.getElementById("txt1").value;
        alert(
"ie取值结果为:" + ie);
    } 
}
</script>

试一试下面标准写法:

 

The standard way to do that is this one:

window.frames["yourFrame"].yourFunction(); 

另,见 http://mao.li/javascript/javascript-iframe/:

1.父页面中获取IFRAME的WINDOW对象

获得了window对象后,就可以调用iframe页面中定义的方法等。

IE:可以通过iframeId、window.iframeId、window.iframeName、window.frames[iframeId]、window.frames[iframeName]、window.frames[iframeIndex]和iframeElement.contentWindow这6种方法来获取iframe的window对象。

FF:可以通过window.iframeName、window.frames[iframeName]和iframeElement.contentWindow这3种方法获取window对象。

总结:为了兼容大多数浏览器,应使用iframeElement.contentWindow来获取。见如下代码:

1 var iframe = document.getElementById('iframe1').contentWindow;

ie6和ie7还可以使用document.frames["iframe Name"]或者document.frames["iframe ID"]来获取相当于contentWindow属性,而firefox和chrome并不支持这些document.frames["iframe Name"]或者document.frames["iframe ID"],但是window.frames["iframe Name"]或window.frames[index](index是索引值)也支持所有主流浏览器;

2.父页面中获取IFRAME的DOCUMENT对象

标准浏览器:通过iframeElement.contentDocument来引用iframe的doument对象,但是IE浏览器不支持,确切说应该是IE 6/7,IE8中可以用此方法来获取了。

IE:用window.frames[iframeId].document来获取

因为document是window的一个子对象,你也可以先获取iframe的window对象,再通过window.document来引用。

总结:应使用以下两方法来获取,见代码:

1 <iframe id="iframe1" src="frame1.html"></iframe> 
2 <script type="text/javascript"
3     //获取iframe的document对象        
4     //方法1:先获取window对象再通过window.docuemnt
5     var iframe = document.getElementById('iframe1').contentWindow.document; 
6     //方法2:分支判断
7     function getIframeDom(iframeId) { 
8         return document.getElementById(iframeId).contentDocument || window.frames[iframeId].document; 
9     
10 </script>

3.IFRAME页面获取父页面的WINDOW对象

parent:父页面window对象
window.parent
top:顶层页面window对象
window.top
self:始终指向当前页面的window对象(与window等价)

如果窗口是顶级窗口,那么parent==self==top
根据这个可以防止网页被嵌套:

1 if(window!=window.top){
2     window.top.location.href=window.location.href:
3 }

兼容性:适用于所有浏览器,当拿到了父页面的window对象后,就可以访问父页面定义的全局变量和函数。

注:chrome要求在服务器环境下进行iframe操作。

 

 

阅读全文……




发表评论 发送引用通报