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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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打开/关闭页面

?

1 2 3 4 5 6 7 8 9

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()中使用，用于跨域传数据或者父子、两个页面数据传递