JavaScript - BOM 浏览器对象模型

浏览器对象模型（Browser Object Model）允许JavaScript与浏览器对话

Window对象：

所有浏览器都支持window对象，它代表浏览器的窗口
全局变量是window对象的属性
全局函数是window对象的方法
甚至（HTML DOM）的 document对象也是 window 对象属性

窗口尺寸：

window.innerHeigth --浏览器窗口的内高度

window.innerWidth--浏览器窗口的内宽度

但是有些浏览器的版本不支持这两种方法，他们用的是：

document.documentElement.clientHeight

document.documentElement.clientWidth

或：

document.body.clientHeigth

document.body.clientWidth

有一个可以包括所有浏览器的解决方法：

实例：

var w =window.innerWidth || document.documentElement.clientWidth||document.body.clientWidht

var h=window.innerheight||document.documentElement.clientHeight||document.body.clientHeight

window对象-计时器对象：

语法：
 ->  开启计时器： 
    number window.setInterval(callback,millisecond);

 ->  关闭计时器：
    window.clearInterval(intervalId);

案例：

<script type="text/javaScript">
    οnlοad=function(){
    window.date.innerHTML=new Date().tolocaleString();
    setInterval(function(){

    window.date.innerHTML=new Date().toLocaleString();},1000);
}; 
</script>

window对象-延时器：

语法：  

开启： number window.setTimeout(callback,millisecond);
等待指定时间调用回调函数，只会执行一次，返回的是演示器id

关闭： clearTimeout(timeoutId);

window对象-剪贴板：

语法：
设置值：  -> clipboardData.seData("text",值)；
取值： -> clipboardData.getData("text",值)；

案例：

<script>
    οnlοad=function(){
    document.getElementById("btn").onClick=function(){
    var rul=location.href;
    //放入剪切板：
    window.clipboardData.setData("text",url);
//得到剪切板的内容
document.getElementById("btn1").onClick=function(){
    var txt=window.clipboardData.getData("text");
}
};
};
</script>

confirm 方法：

用于显示一个带有指定消息以及按钮的对话框

<script type="text/javascript">
        onload = function () {
            btn.onclick = function () {
                var res = window.confirm("测试消息，请选择");
                alert(res);
            };
        };

    </script>
</head>
<body>
    <input type="button" name="name" value="click" id="btn"/>
</body>

结果：当点击确定的时候，显示true，取消的时候显示false

location对象：

作用：页面跳转

<script type="text/javascript">
        onload = function () {
            btn.onclick = function () {
                window.location.href = "https://www.baidu.com/";
            };
        };
    </script>

screen对象

screen.width :属性返回以像素的屏幕宽度

例子： 

document.getElementById("demo").innerHTML=screen.width;

screen.height:返回屏幕的高度

location对象：可以不加window前缀

location.href	返回当前页面的href document.getElementById("demo").innerHTML="当前页面是"+window.location.href;
location.hostname	返回当前web主机的域名
location.pathname	返回当前页面的路径或文件名
location.protocol	返回使用的web协议
location.assign	加载新文档

history对象：

包含浏览器历史

history.back() 方法加载历史列表中的前一个URL；

等价于在浏览器中点击后退按钮

histroy.forward() 加载历史列表中的下一个URL；

赫于富

发布了130 篇原创文章 · 获赞 33 · 访问量 10万+

私信关注