javascript在父窗口iframe跨域操作子元素无法绑定子域下的function的解决办法

阅读更多

想不出概括性的标题，这里就称展开问题的描述：

a.com下有

a.html

代码片段

...

a

...

 

a.js

a.js有方法

function a(){}
function b(){}

 

 

b.com下有

b.html

代码片段

...

...

 

b.js

 

$jq(document).ready(function(){
   example();
});
function example(){
   $jq(window.frames["subiframe"].document).find("#spanid").removeAttr("onclick").unbind().attr("onclick","javascript:b();");
}

 

 

 以上代码实现了在b.com下b.js为a.com下的元素spanid重新绑定事件，原来绑定a现在绑定成b。

这样可行吗？

最终的答案是：不行！因为万恶的ie6、ie7不认attr这样的事件绑定写法。

 

关于jquery事件绑定有bind、live、delegate，三者的区别得使用可参考此文http://www.jb51.net/article/27309.htm

把上面的attr改成bind、live、delegate的写法

$jq(window.frames["subiframe"].document).find("#spanid").removeAttr("onclick").unbind().bind("click",function(){b();});

更加不行了，改成这样的写法无论什么浏览器都不认得b()这个方法了。

 

 结论：

javascript在iframe跨域时父窗口操作子窗口并绑定子元素到子域下的function没有可行的办法！但如果不考虑万恶的ie6、ie7可以勉强使用attr这种方法。

 

解决办法：

虽然跨域对子元素绑定子方法绕不过ie6、ie7，但是对于iframe下的子元素增删改还是十分方便的，因此我们可以想办法重写整个spanid这个元素，重写example

function example(){
   $jq(window.frames["subiframe"].document).find("#spanid").removeAttr("onclick").unbind();
   $jq(window.frames["subiframe"].document).find("#divid").html('a');
}