javascript在父窗口iframe跨域操作子元素无法绑定子域下的function的解决方法
javascript在父窗口iframe跨域操作子元素无法绑定子域下的function的解决办法
想不出概括性的标题,这里就称展开问题的描述:
a.com下有
a.html
代码片段
<script src="a.js"></script> ... <div id="divid"> <span id="spanid" onclick="a();">a</span> </div> ...
a.js
a.js有方法
function a(){} function b(){}
b.com下有
b.html
代码片段
<script src="b.js"></script> ... <iframe id="subiframe" name="subiframe" src="a.com/a.html"></iframe> ...
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('<span id="spanid" onclick="b();">a</span>'); }