前端iframe父子页面相互访问，通过Object.defineProperty实现相互事件触发

在不vue.react等前端优秀组件化框架情况下 iframe已然成为一种不错的页面嵌套工具

那么问题就是我们该如何实现父子页面的数据联动呢
首先 子页面可以通过parent访问父页面的js变量
例如
父页面

 data = {
    detailsid: null
 }

千万不要在变量前添加作用域 var和let都会访问不到，声明常量则无法修改，所有就不要声明作用域了
子页面编写js

console.log(parent.data);

这样就可以访问的父页面的值
我们也可以去主动修改父页面的变量

parent.data.detailsid = 111;

然后我们给iframe添加一个name标签属性
这里假设为iframeName

<iframe name="iframeName" style="width: 100%;height:100vh;" background-color:#DEDEDE; border:0;" src="子页面路径"></iframe>

然后我们在父页面通过获取标签来拿子页面的js
子页面

data = {
    name:123
}

父页面

console.log(document.iframeName.data);

这样我们就可以实现变量的相互访问
如果想相互调用函数 我们就会想起数据绑定的Object.defineProperty
例如我们在父页面定义

data = {
    detailsid: null
 }
 Object.defineProperty(data, 'detailsid', {
    get: function () { //取值的时候会触发
       console.log('get: ', age);
       return age;
   },
   set: function (value) { //更新值的时候会触发
       age = value;
       console.log('set方法已被触发');
   }
});

这样我们通过子页面需改data中的detailsid 在父页面设置的Object set方法将被触发
这样也就间接实现了相互方法调用的效果