vv13
博客订阅

BOM对象的应用

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标签阻止其跳转

将a标签的href值设为undefined,就可以阻止其跳转,void函数会执行一个表达式,并只返回undefined,我们也可以通过执行;直接返回undefined:

  • <a href="javascript:void(0);">点击不会进行跳转</a>
  • <a href="javascript:;">点击不会进行跳转</a>