您现在的位置:首页 >> 前端 >> 内容

iframe子页面与父页面数据通讯

时间:2017/8/21 9:33:00 点击:

  核心提示:父页面调用子页面方法:FrameName.window.childMethod();子页面调用父页面方法:parent.window.parentMethod();DOM元素访问获取到页面的windo...

父页面调用子页面方法:FrameName.window.childMethod();

子页面调用父页面方法:parent.window.parentMethod();

DOM元素访问

获取到页面的window.document对象后,即可访问DOM元素

注意事项

要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误。判断iframe是否加载完成有两种方法:

1. iframe上用onload事件

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

如果涉及到iframe子页面中与父页面共享一个对象并且有ajax请求用到这个对象的时候 , 把子页面的ajax封装成一个方法写在父页面,通过iframe数据通讯来实现调用 ,

father.html:
function fn(){
$.ajax({  ... })
};
child.html:
<button onclick="parent.fn()"></button>

通过parent.fn()来实现调用父页面封装的方法;

Tags:IF FR RA AM 
作者:网络 来源:AloneAsFoa