填坑之路:iframe的各种坑
连着两个项目遇到iframe,难受。
同域还好,不同域简直爆炸。
当然几经折磨,还是有了办法。
解决方案就是让它们变同域了,那做法就是在父子两个窗口设置一样的 domain 。 当然这个 domain 也不是随便设置的,至少保证二者有那么点类似,不然
比如现在父窗口域名 http://abc.dev.web.com ,子窗口域名 http://d.ef.dev.web.com 那现在我们可以发现二者的域名后半部分 dev.web.com 是一样的,那么我们就可以在两个页面的入口 js 文件内写上 document.domain = 'dev.web.com' ,那么二者就同域了(本地测试考虑改host文件,或者将二者设为同域如127.0.0.1不同端口).
总之,整体的思路就是取二者相同的域名部分来设domain(dev.web.com 不行就换 web.com,再不行就 com 总有一个能一样吧!)
那现在同域了以后就好办了。
其中contentWindow属性支持所有主流浏览器,contentDocument被IE6,7拒了。
在实际使用中,我们可能会需要对iframe中的dom节点绑定事件,一直绑不上事件的原因 狠狠狠有可能 就是你在父窗口的 ready(onload)中压根就没加载到 dom(iframe子窗口内的dom何时加载完成不能确定),所以,一个比较 low 的做法是轮询下 dom 是否加载完全:
还有一个要知道的就是可以在 iframe 的 src 中大做文章,很多时候可以把需要的一些信息附在src中,比如 src='http://abc.dev.web.com?access_token=abc&mac_key=cfd 之类的,子窗口就可以通过读取url来操作,方便得很。
首先搞懂几个对象: