JS子页面调用父页面函数,监听刷新事件
目录
1.子页面调用父页面的函数
2.监听刷新事件
1.子页面调用父页面的方法
我们先来说说什么是子页面,在我这里子页面就是域名一样,然后使用iframe引入的页面就是我所说的子页面,为什么需要用到这个功能,是为了实现跨页面交互与通信,因为有一些功能是需要跨页面使用父页面的函数来达到想要的效果,比如说子页面想要跳转页面,还要让父页面的面包屑和树形菜单显示对应页面高亮,就需要使用这个方法去调用父页面的函数,来达到这个效果
它的应用场景一般是数据共享与同步,跨页面操作协调,代码复用与模块化,页面布局与样式调整
我们可以通过这个方法来调用父页面的函数
window.parent
后面写上一个点,点的后面写你要调用的父页面的函数,也可以通过调用的父页面的函数在它的小括号里面传你想传入的参数,在父页面可以使用行参来获取子页面传过来的参数
2.监听刷新事件
监听刷新是为了在页面刷新之后,实现我们的一些操作,比如面包屑,我们不想让面包屑在刷新的时候消失就需要监听页面之后,写上我们自己的逻辑来实现刷新页面面包屑不消失
它的应用场景是数据的编程于恢复,防止数据丢失和误操作提醒,性能优化与资源管理,用户行为与统计
下面是监听页面刷新的代码逻辑
// 监听页面刷新事件
window.addEventListener('load', function(event) {// 如果点击刷新按钮执行下面if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {//这里页面刷新之后自己添加的逻辑代码} else {}
});