BOM即浏览器对象模型,在js代码里,存在一个代表窗体的全局window对象,通过它可以与浏览器进行一定的交互功能,如:
window.location.href = 'http://www.google.com';
window.open('http://www.google.com');
window.location.reload();
window.history.back();
window.history.forward();
考虑以下场景:在一个页面中弹出一个子页面,在操作完成后即关闭子页面并刷新父页面。这个场景会在登录页面中十分常见,我们希望当用户登陆完成后刷新父页面,因此需要引用父对象,若在同源页面(浏览器的同源保护策略)即可对子页面进行以下方法的调用:
function dealOk() {
window.opener.location.reload();
window.close();
}
若是引入第三方的页面,如qq互联接口,则无法直接通过opener获取到父对象进行操作,我们可以通过轮询子窗体状态进行控制:
// showPopup会返回window对象,原理是window.open()方法的调用
const childrenWindow = QC.Login.showPopup({
appId: APPID,
redirectURI: REDIRECT_URI,
});
const timer = setInterval(() => {
// 查看窗体是否被关闭
if (childrenWindow.closed) {
clearInterval(timer); // 清除轮询
window.location.reload(); // 刷新页面
}
},500);
将a标签的href值设为undefined,就可以阻止其跳转,void函数会执行一个表达式,并只返回undefined,我们也可以通过执行;
直接返回undefined:
<a href="javascript:void(0);">点击不会进行跳转</a>
<a href="javascript:;">点击不会进行跳转</a>