js实例--浏览器模块

window,navigator,screen,history,location;

弹出框：

• 仅弹出：alert('string');
• 返回布尔值：confirm('string');
• 返回输入值：prompt('string','default')

离开页面：

window.onbeforeunload = function (e) {

      var e = e || window.event;

      // For IE and Firefox

      if (e) {

        e.returnValue = 'Leaving the page';

      }

      // For Safari

      return 'Leaving the page';

    };

其中其他window事件如window.alert,window.comfirm等设置在此方法内会被忽略；

如果一定要设置执行可以先设置到setTime()当中，再设置window.onbeforeunload 一次；

设置了这个方法以后，在其他地方调用离开当前页面的方法，也会执行该事件,可以设置window.onbeforeunload = null；

onunload已经在新版浏览器中不支持；

浏览器环境信息：navigator;

• navigator.userAgent:浏览器信息；
• navigator.platform:平台信息;

根据navigator.userAgent判断当前为手机还是非手机：link

function detectmob() {

	console.log(/Android|webOS|iPhone|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent))

}

当前url信息：location；

• location.url:               完整url；
• location.pathname:      相对路径名；
• location.hostname:    主机名；
• location.protocol:     url协议，http:
• location.hash:         url后面#的部分；

一般完整的url：location.protocol + '//' + location.hostname + location.pathname + location.hash(#) / location.search(?)

建立面包屑路径：demo

利用hash值跳转连接：demo 

给url附加持久信息：demo

不进行跳转来进行页面进退：demo

• window.history.pushState； window.onpopstate；

浏览器页面信息：client

获取当前页面/窗口大小：demo

位置：

• 鼠标点击：

demo

浏览器文档位置： pageX/pageY;

浏览器窗口位置： clientX/clientY;

浏览器滚动条位置： document.documentElement.scrollLeft/scrollTop ; document.body.scrollLeft/scrollTop;

电脑屏幕位置：screenX/screenY;

鼠标点击将元素移动到该位置：demo

• 元素位置：

document.getElementById('elem1').getBoundingClientRect()  //返回一个ClientRect对象，包含元素边界（注意不是style意义上的）信息；

 例子：获取元素高度 ,移动元素位置