JS 常用dom或者window对象的操作

JavaScript中获取dom元素高度和宽度的方法如下：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被滚去的高： document.body.scrollTop
网页被滚去的左： document.body.scrollLeft

显示网页可视的宽 document.documentElement.clientWidth
显示网页可视的高 document.documentElement.clientHeight

对应的dom元素的宽高有以下几个常用的：

元素的实际高度：document.getElementById("div").offsetHeight
元素的实际宽度：document.getElementById("div").offsetWidth
元素的实际距离左边界的距离：document.getElementById("div").offsetLeft
元素的实际距离上边界的距离：document.getElementById("div").offsetTop

确定当前标签页是否激活

document.addEventListener('visibilitychange', function(){
      // 浏览器切换事件，仅限于主动点击当前标签页
      if (document.visibilityState === 'hidden') {
        // 离开当前tab标签
        console.log("离开当前tab标签");
      } else {
        // 回到当前tab标签
        console.log("回到当前tab标签");
      }
    });

 

window.addEventListener('focus', function() {
      console.log('聚焦')
    });
// 可以用来实现当前标签页被选中、当前标签页右侧相邻标签页被关闭时，
// 当前标签页也会启动事件，更推荐这个

 

 

阻止用户关闭离开当前页面

 window.addEventListener('beforeunload', (event) => {
      event.returnValue = 'what'
      event.preventDefault();
// 上面两句约等，但是returnValue更好用
// 只要event.returnValue值不为空，则离开页面时会被弹框询问
    })

 

浏览器用JS打开/关闭页面

window.open(链接,a标签的目标属性值)
// _self: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此 
// 值是默认的，如果没有指定属性的话。
// _blank: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
// _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下 
// 文。如果没有parent框架或者浏览上下文，此选项的行为方式与 _self 相同。
// _top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5 
// 中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有 
// parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self

　　

window.close() 
// 关闭由js打开的页面

// Scripts may close only the windows that were opened by it 关闭非js打开的页面就会报这个错

window.location.href="about:blank";
window.close();
// 这个是先用js修改路径，然后关闭页面，避免报错

 

postMessage能在iframe和window.open()中使用，用于跨域传数据或者父子、两个页面数据传递