子窗口和父窗口的页面js方法的相互使用

keywords: iframe子窗口调用方法父窗口调用方法javascript前端

背景介绍

项目中首页存在一个菜单，然后可以打开对应的页面，利用iframe的标签加载子页面来显示，这样子就形成了父窗口和子窗口的关系

场景一

父窗口需要执行某个子窗口页面的javascript的方法

每一个子窗口都是iframe，所以这个标签元素是具有name属性的，它就是每个子页面的名字，可以用来定位到哪个子页面

<iframe name="son" src="xxx.com"></iframe>
// 这个子页面有个方法 sonDo【这个必须是全局的】，需要父页面调用的

在父页面直接调用上面的子窗口的方法

// 父页面下面执行
window.son.sonDo();

场景二

子窗口执行父窗口或者顶级窗口的javascript方法

// 父页面
function fatherDo(){
    // 执行某些事 
};
// 子页面执行
parent.fatherDo(); // parent是父级窗口 
top.fatherDo(); // top是顶级的窗口

场景三

子窗口弹窗到父窗口整个页面，为了视觉上面体验更好，然后该弹窗的功能里面还是调用回子窗口的编写的代码功能，这样子就是方便代码的维护，子页面的方法依旧在子页面上

子窗口弹窗的内容的方法需要定制一下：
1-弹窗内容的方法需要带上自身iframe的名字，可使用window.name来获取；
2-方法是全局的；

例子:

/**
* 下面全是子页面的代码
* 使用layer弹窗插件示范
*/
// 子页面的弹窗，弹至到父级窗口
function sonDo() {
    console.log("来自子页面，在父窗口点击事件调用子窗口的方法");
}
top.layer.open({
  type:1,
  content:`<span onclick="${window.name}.sonDo(;">`
})

微信公众号：1芒果Mango