JsBom

BOM:浏览器对象模型 BOM大部分都是对window对象的操作

window.open

window.open(页面的地址URL,打开的方式)
  • 如果URL默认为空,则默认打开一个新的空白页
  • 如果打开方式为空,则默认为新窗口方式
  • open()方法的返回值: 返回新打开的窗口window对象

window.close

关闭窗口(有兼容性问题)
1 firefox 默认无法关闭
2 chorme 默认直接关闭
3 ie 询问用户
4 可以在关闭本窗口中通过JS方法打开新的窗口

<input type="button" value="打开新窗口">
<input type="button" value="关闭窗口">
<input type="button" value="关闭新窗口">

对应下面的代码

    var inputall = document.getElementsByTagName("input");
    var newPage = null;
    inputall[0].onclick = function(){
         newPage = window.open("","_blank");
        newPage.document.body.style.background = "red";    //不会起作用。除非不是网址而是空白页的。
    }
    inputall[2].onclick = function(){
        newPage.close();  //新开的
    }

window.navigator.userAgent

window.navigator.userAgent ==浏览器信息
可以通过这个属性判断浏览器信息

   var string = window.navigator.userAgent;
    var word = string.toLowerCase();
     window.alert(word);
    if(word.indexOf("msie")==-1)
    {
        window.alert("找不到")
    }

window.location

window.location 浏览器地址栏信息
window.location 看似一串字符串,其实一个对象

  • window.location.href :地址栏的地址url
  • window.location.search 这个是url?后面的内容
  • window.location.hash: 表示url#后面的内容

文档宽高及窗口事件

可视区尺寸,没有border

元素.clientWidth
元素.clientHeight
要是获取到整个浏览器的宽度和高度只有
document.documentElement.clientHeight
或者document.body.clientHeight;

滚动距离

元素.scrollTop/scrollLeft
指的是滚动条距离顶部或者左边的距离
document.body.scrollTop
document.documentElement.scrollTop
元素.scrollHeight指的是整个里面的高度

兼容性问题

  • chorme浏览器认为滚动距离是在body上面
  • 其他浏览器认为滚动距离是在documentElement
    建议用下面的方法
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop

onscroll

var i = 0 ;
window.onscroll = function(){
 document.title = i++;
}

onresize

onresize:当窗口大小发生改变的时候触发

var  i = 0 ;
window.onresize = function(){
  document.title = i++;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,798评论 0 8
  • Window和document对象的区别 window对象window对象表示浏览器中打开的窗口window对象是...
    FConfidence阅读 2,238评论 0 5
  • 原文链接 http://blog.poetries.top/2016/12/13/js-props声明:本文根据慕...
    前端进阶之旅阅读 3,313评论 1 44
  • 1.第一种方式:锚链接 优点:简单快速,没有兼容性问题 缺点: 视觉上不够直观,用户体验不太好 2.js的方式: ...
    love2013阅读 799评论 0 0
  • “一花一世界,一叶子菩提” 想家的时候,泪溢出眼眶,却只能把满满的相思深埋心底!这时候,我仿佛是个在冰窖里哭泣的孩...
    法显阅读 550评论 0 0