细说JavaScript BOM

来源：互联网发布：淘宝自动下架之后编辑：程序博客网时间：2024/05/20 05:28

1、BOM 简介

　　所谓的 BOM 即浏览器对象模型（Browser Object Model）。BOM 赋予了 JS 操作浏览器的能力，即 window 操作。DOM 则用于创建删除节点，操作 HTML 文档。BOM 尚无正式的标准，导致各浏览器对于 BOM 方法的支持各有不同，因此需要具体问题具体对待。

2、window 对象

　　window 对象是 BOM 的核心，window 对象指当前的浏览器窗口。所有 JS 全局对象、函数以及变量都属于 window 对象。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 DOM 的 document 也属于 window 对象的属性之一，只是大多数情况下可以忽略不写。

　　window 对象方法：

方法描述alert()弹出带有文本消息和一个确认按钮的警告框prompt()弹出可提示用户输入的对话框confirm()弹出带有文本消息及确认按钮和取消按钮的对话框open()打开一个新的浏览器窗口　　　　close()关闭浏览器窗口print()打印当前窗口的内容focus()把键盘焦点给予一个窗口blur()把键盘焦点从顶层窗口移开moveBy(xnum, ynum)相对窗口的当前坐标将对象移动指定的像素moveTo(x, y)把窗口的左上角移动到一个指定的坐标resizeBy(w, h)按照指定的像素调整窗口的大小resizeTo(w, h)将窗口的大小调整到指定的宽度和高度scrollBy(xnum, ynum)按照指定的像素值来滚动内容scrollTo(x, y)将内容滚动到指定的坐标setInterval()每隔指定的时间执行代码setTimeout()在指定的延迟时间之后来执行代码clearInterval()取消 setInterval() 的设置clearTimeout()取消 setTimeout() 的设置
3、窗口操作

　　(1)、打开窗口

　　open() 方法可用于打开新窗口。

　　语法：window.open(url, name/target, 窗口设置, replace)

　　该方法的三个参数都是可选的，默认在新页面打开一个空白页。第一个参数可设置要打开窗口的路径。第二个参数规定在何处打开新窗口，也可用于指定窗口的名称。第三个参数设置窗口参数，多个参数可用逗号分隔。如果有第一个参数，后面两个参数可省略，则在新页面打开。第二个参数一般无需设置，如果要规定窗口的参数，则必须有第二个参数，必须为 '_blank'，或者用 '', 代替，并且距离屏幕顶部不能为 0，否则失效，如果设置了左边距离，顶部可设置为 0。最后一个参数规定加载到窗口的 URL 是在窗口的浏览历史中创建一个条目，还是替换浏览器历史中的当前条目，值为 true 或 false，值为 true 时 URL 替换浏览历史中的当前条目，为 false 时 URL 在浏览历史中创建新的条目。

　　下表是一些常用的窗口设置参数：

参数

值

说明

top

Num

新窗口距屏幕顶部的距离

left

Num

新窗口距屏幕左端的距离

width

Num

新窗口的宽度

height

Num

新窗口的高度

menubar

yes/no/1/0

窗口是否有菜单栏，默认是yes

scrollbars

yes/no/1/0

窗口是否有滚动条，默认是yes

toolbar

yes/no/1/0

窗口是否有工具栏，默认是yes

status

yes/no/1/0

窗口是否有状态栏，默认是yes

location

yes/no/1/0

窗口是否显示地址栏，默认是yes

resizable

yes/no/1/0

是否允许改变窗口大小，默认是yes

directories

yes/no/1/0

是否添加目录按钮，默认是yes

　　实例A：点击按钮，在新窗口打开上海尚学堂首页，宽 600，高 400，距屏顶 0 像素，屏左 10 像素。

 
 
 
<body>
<input type="button" value="点击我，打开新窗口!">
<script>
function newWin(){
    window.open('http://www.shsxt.com', '_blank', 'width=600,height=400,top=0,left=10');
}
</script>
</body>

　该实例在 IE 下并不会打开一个自定义的窗口，而是新打开一个标签页。

　　如果在脚本中直接打开新窗口，在 Chrome 和 FF 下会被当作广告弹窗直接拦截，但是在 IE 下可以正常显示。360 浏览器的极速模式使用的是 Chrome 的内核，兼容模式则使用的 IE 内核，360 浏览器使用人群相对较多，这里就不描述了，只要其余浏览器正常运行，他就没什么问题。

 
 <script>
 window.open();
 window.open('http://www.shsxt.com');
 </script>

　实例B：获得焦点和失去焦点

 
 
 
<body>
<input type="button" value="获得焦点">
<script>
//确保新的窗口获得焦点：
function openWin(){
    var oGet = window.open('', '', 'width=400,height=400');
    oGet.document.write('<p>我是新打开的窗口</p>');
    oGet.focus();
}
</script>
 
<input type="button" value="失去焦点">
<script>
//确保新的窗口没有获得焦点：
function newWin(){
    var lose = window.open('', '', 'width=400,height=300');
    lose.document.write('<p>我是新打开的窗口</p>');
    lose.blur();
}
</script>[/font][/color][/align]
[align=left][font=black Verdana, Arial, Helvetica, sans-serif][color=#000000]</body>

实例C：返回新打开窗口的名称

 
 
<body>
<input type="button" value="打开">
<script>
function openWin(){
    var newWin = window.open('', 'newWindow', 'width=400,height=300');
    newWin.document.write('<p>新窗口名称：' + newWin.name + '</p>');
}
</script>
</body>

实例D：打开新窗口向父窗口传递信息

 
 
<body>
<input type="button" value="打开">
<script>
function openWin(){
    var newWin = window.open('', '', 'width=400,height=300');
    newWin.document.write('<p>关闭我之后会向父窗口输入文本信息</p>');
    newWin.focus();
    newWin.opener.document.write('<p>我是父窗口，加载完成后，向我输出内容会覆盖我所有内容</p>');
}
</script>
</body>

实例E：指定窗口大小、移动窗口和滚动内容

 
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript实例</title>
</head>
<body>
<br><br>
<h4>用指定像素调整窗口大小：</h4>
<input type="button" value="打开"><br><br>
<input type="button" value="调整">
<script>
var w;
function openWin(){
    w=window.open('', '', 'width=100,height=100,top=10');
    w.focus();
}
    
function byWin(){
    //如果不使用框架，可使用window代替top
    w.top.resizeBy(500,500);
    w.focus();
}
</script>
 
<h4>将窗口的大小调整到指定的宽度和高度：</h4>
<input type="button" value="打开"><br><br>
<input type="button" value="调整">
<script>
var w;
function newWin(){
    w=window.open('', '', 'width=100,height=100');
    w.focus();
}
 
function toWin(){
    w.resizeTo(500,500);
    w.focus();
}
</script>
 
<h4>相对于当前位置移动新窗口：</h4>
<input type="button" value="打开"><br><br>
<input type="button" value="多移动几下">
<script>
var w;
function oWin(){
    w = window.open('', '', 'width=100,height=100');
}
 
function moveWin(){
    w.moveBy(200,200);
    w.focus();
}
</script>
 
<h4>移动新窗口到指定位置：</h4>
<input type="button" value="打开"><br><br>
<input type="button" value="移动">
<script>
var w;
function nWin(){
    w=window.open('', '', 'width=400,height=300');
}
 
function moveToWin(){
    w.moveTo(0,0);
    w.focus();
}
</script>
 
<h4>由指定的像素数滚动内容：</h4>
<input type="button" style="position:fixed;top:0;" value="由指定的像素数滚动内容">
<script>
function scrollWin(){
    window.scrollBy(10,10);
}
</script>
 
<h4>滚动到指定内容处：</h4>
<input type="button" value="滚动到指定内容处">
<script>
function scrollWindow(){
    window.scrollTo(10,50);
}
</script>
 
<br><br><br><br><br><br>
</body>
</html>

　（2）、方法解析：

　　resizeBy(w, h)：根据指定的像素来调整窗口的大小。该方法定义指定窗口的右下角移动的像素，左上角将不会被移动(它停留在其原来的坐标)。

　　该方法有两个参数，第一个参数是必需的，指定窗口宽度增加的像素数。第二个参数可选，指定窗口高度增加的像素数。两个参数可为正数，也可为负数。

　　resizeTo(w, h)：用于把窗口大小调整为指定的宽度和高度。

　　该方法两个参数都是必需的，用来指定设置窗口的宽度和高度，以像素计。

　　moveBy(xnum, ynum)：可相对窗口的当前坐标把它移动指定的像素。

　　该方法有两个参数，第一个参数指定要把窗口右移的像素数，第二个参数指定要把窗口下移的像素数。

　　moveTo(x, y)：可把窗口的左上角移动到一个指定的坐标。

　　该方法有两个参数，第一个参数指定窗口新位置的 x 坐标，第二个参数指定窗口新位置的 y 坐标。

　　scrollBy(xnum, ynum)：可把内容滚动指定的像素数。

　　该方法有两个必需参数，第一个参数指定把文档向右滚动的像素数。第二个参数指定把文档向下滚动的像素数。

　　scrollTo(x, y)：可把内容滚动到指定的坐标。

　　该方法有两个必需参数，第一个指定要在窗口文档显示区左上角显示的文档的 x 坐标。第二个参数指定要在窗口文档显示区左上角显示的文档的 y 坐标。

　　实例F：打印当前页面

<body>

function printpage(){

window.print();

}

</script>

</body>

（3）、关闭窗口

　　window.close() 方法可用于关闭当前窗口。

 
//点击按钮关闭当前窗口
 <input type="button" value="关闭窗口">

该方法在 Chrome 下运行正常。IE 下弹窗提示：你查看的网页正在试图关闭选项卡，是否关闭选项卡？点击否，不关闭，点击是，关闭窗口。在 FF 下会报错，因为在 FF 下不允许脚本关闭非脚本打开的窗口，也就是不能关闭一个用户自己打开的窗口，只能关闭由 open 打开的窗口。所以可以先用 open 打开，再关闭，这样就能解决 FF 下不能关闭的问题。这就需要创建两个文档来演示该问题：第二个文档使用上面实例保存为 close.html，第一个文档如下：

 
//先用open打开保存的文档，然后再点击关闭窗口按钮，效果就达到了
 <input type="button" value="打开窗口">

　FF 浏览器的安全机制比较高，不能关闭用户打开的窗口，在网上也没找有找到什么好的办法，只能修改浏览器的默认配置，显然这是不可取的。上面的办法比较笨，另辟蹊跷不能关闭用户打开的，那就自己 open 一个再 close，但这还是比较实在的方法，至少目的是达到了。

　　在 IE 下可使用下面的代码关闭当前窗口，不弹窗提示。同时也适用于 Chrome。这里使用 a 标签在 FF 下可以看到报错，使用按钮则没有报错信息。

 
 
<a href="javascript：window.opener=null;window.open('', '_self');window.close();">关闭</a>

实例G：关闭新打开的窗口

 
 
 
<body>
<input type="button" value="打开">
<input type="button" value="关闭">
<script>
function openWin(){
    newWin = window.open('http://www.shsxt.com',  '', 'width=400,height=300,top=200');
}
function closeWin(){
    newWin.close();
}
</script>
</body>

实例H：检查新窗口是否已关闭

 
 
 
<body>
<input type="button" value="打开'">
<input type="button" value="关闭">
<input type="button" value="是否关闭">
<p id="p1"></p>
<script>
var newWin;
function openWin(){
    newWin = window.open('', '', 'width=400,height=300,top=200');
}
 
function closeWin(){
    if(newWin){
        newWin.close();
    }
}
 
var oP = document.getElementById('p1');
function checkWin(){
    if(!newWin){
        oP.innerHTML = '新窗口还没被打开！';
    }
    else{
        if(newWin.closed){
            oP.innerHTML = '新窗口已关闭！';
        }
        else{
            oP.innerHTML = '新窗口未关闭！';
        }
    }   
}
</script>
</body>

4、浏览器信息

　　window.navigator 对象获取包含有关访问者浏览器的信息。该属性在使用时可以不加 window 前缀。

 
 
 
<body>[/font][/color][/align][align=left][color=rgb(0, 0, 0)][font=&quot]
<div id="div1"></div>
<script>
txt = '<p>Browser CodeName（浏览器代码名称）: ' + navigator.appCodeName + '</p>';
txt+= '<p>Browser Name（浏览器名称）: ' + navigator.appName + '</p>';
txt+= '<p>Browser Version（浏览器版本）: ' + navigator.appVersion + '</p>';
txt+= '<p>Cookies Enabled（启用Cookies）: ' + navigator.cookieEnabled + '</p>';
txt+= '<p>Platform（操作平台）: ' + navigator.platform + '</p>';
txt+= '<p>User-agent header（由客户机发送服务器的 user-agent 头部信息）: ' + navigator.userAgent + '</p>';
txt+= '<p>User-agent language（客户机代理语言）: ' + navigator.systemLanguage + '</p>';
 
document.getElementById('div1').innerHTML=txt;
</script>
</body>

　其中最常用的属性是 navigator.userAgent，返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符

 
 
<script>
 document.write(navigator.userAgent);
 </script>

阅读全文

0 0