<iframe id="ifr" name="ifr" width="100%" height="500" src="bb.html" onload="Init()"></iframe>

 

取Iframe有两种方式:

1.ifr_id = document.getElementById("ifr");  //取到的是dom结果,主要用于操作property,改变Height,width之类的用这个

2.ifr_window = window.frames["ifr"];  //取到的是文档结果,可以取到文档的内容,如ifr_window.document.body.innerHTML

不同的对象用于不同的场合,注意不要弄混。

 

方法互调:

父调子:ifr_window.subMethod();

子调父:parent.topMethod();

注意用到的都是window.frames["ifr"]的方式取到的对象。

 

在Iframe加载完成后再进行操作

如果Iframe还未加载完成就开始调用里面的方法或变量,无疑会产生错误。判断Iframe是否加载完毕有两种方法:

1.在Iframe上用onload事件;

2.用document.readyState=="complete"来判断

 

跨域

并不是所有情况下父页面都可以操作子页面的。哪些情况下允许互相操作呢?

1.两个页面都是处于同一域名下,如www.a.com/

2.两个页面处于同一父域名下,如www.a.com/和bbs.a.com,这种情况默认是不能互访的,但是通过设置document.domain来让其互访,下面会具体讲到。

 

如果父页面在a.com下,引用了一个b.com的Iframe,那么父页面的JS不能读取Iframe的结构,这个问题就是跨域。

为什么要禁止这个操作呢?如果可以随意操作的话,我在自己的站点上引用163的页面,然后读取Iframe的cookie,那么163用户cookie里记住的密码就被收集到了。

 

解决跨域的方法:

1.对于在同一父域名下的,如上面的第二种情况,通过设置document.domain=a.com可让其实现互相访问;

2.对于不在同一父域名下的,但纯用JS是不能实现让其互访的,有一个变通的方法是类似ajax代理,即在a.com下新建一个页面,在server端其访问b.com下面的这个页面,将待访问的这个页面内容输出出来,然后再引用这个新建的页面,就变成在同一域名下了。

 

自适应高度

自适应高度平时用的较多,这里贴一段代码,兼容目前的各种浏览器

代码
<script type="text/javascript" language="javascript">   
    
function iFrameHeight() {   
        
var ifm= document.getElementById("iframepage");   
        
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   
        
if(ifm != null && subWeb != null) {
           ifm.height 
= subWeb.body.scrollHeight;
        }   
    }   
</script>

 

 

 

 

posted on 2011-01-06 16:31  dengwf  阅读(5502)  评论(3编辑  收藏  举报