BOM综合应用案例——浏览器窗口控制与交互

TechLearn
962 阅读5分钟

BOM简介

BOM（Browser Object Model）即浏览器对象模型 

提供了独立于内容而与浏览器窗口进行交互的对象，主要用于管理窗口与窗口之间的通讯，因此其核心对象是window

windows对象

所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。

window对象的其它常用方法

方法说明
open()打开新窗口,并返回新窗口的对象
close()关闭当前窗口
moveTo() 移动当前窗口
resizeTo()调整当前窗口的尺寸
setInterval()间隔指定的毫秒数不停地执行指定的代码。
setTimeout()暂停指定的毫秒数后执行指定的代码
clearInterval()用于停止 setInterval() 方法执行的函数代码。
clearTimeout()用于停止执行setTimeout()方法的函数代码
frameElement()获取当前文档的宿主节点iframe元素
execScript()与eval的功能相同，不同的是eval函数执行后的脚本的作用域是当前执行上下文，而execScript则总是针对全局作用域

所有window对象的方法和属性调用时可以省略window

示例

使用对话框显示”世界和平“

window.alert("世界和平");

window对象的属性

  
innerHeight浏览器窗口的内部高度
innerWidth浏览器窗口的内部宽度
document文档对象
screen屏幕对象
location地址对象
history历史对象
event事件对象
navigator包含有关访问者浏览器的信息

接下来对window对象的方法和属性进行详细的讲解

open和close

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。此方法针返回一外窗体对象。

语法

window.open(URL,name,features,replace)
参数描述
URL一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记     和 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么   open()   方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。
replace一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：true   - URL 替换浏览历史中的当前条目。   false   - URL 在浏览历史中创建新的条目。  

1. 每次打开一个新的标签或窗口，此时只需要给open方法传递一个参数

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function showEdu(){
                open("https://www.budaos.com");
            }

        </script>
    </head>
    <body>
        <button onclick="showEdu()">布道师学习通</button>
    </body>
</html>

点击按钮在新的标签中打开布道师学习通官网

2. 总是在一个已打开的标签或窗体中刷新网页

open方法的第二个参数相当于新打开的标签或窗体的名称，如果没有使用open打开的标签或窗体，则新打开一个标签或窗体，如果已经存在并且打开时的名称与当前open方法指定的名称相同时，则在此标签或窗体中重新加载新的页面。

示例

点击按钮在新的标签中打开创蓝教育官网，但如果已使用open打开了一个，则刷新此新窗体

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function showEdu(){
open("https://www.budaos.com","budaos");
}

</script>
</head>
<body>
<button onclick="showEdu()">布道师学习通</button>
</body>
</html>

3. 按指定的窗口特征打开新窗体

如果open方法设置了第三个参数，就会打开一个新的窗体，而不是一个标签，第三个参数设置了新窗体的外观特征。

窗口特征

  
channelmode=yesno10是否使用剧院模式显示窗口。默认为 no。
directories=yesno10是否添加目录按钮。默认为 yes。
fullscreen=yesno10是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels窗口文档显示区的高度。以像素计。
left=pixels窗口的 x 坐标。以像素计。
location=yesno10是否显示地址字段。默认是 yes。
menubar=yesno10是否显示菜单栏。默认是 yes。
resizable=yesno10窗口是否可调节尺寸。默认是 yes。
scrollbars=yesno10是否显示滚动条。默认是 yes。
status=yesno10是否添加状态栏。默认是 yes。
titlebar=yesno10是否显示标题栏。默认是 yes。
toolbar=yesno10是否显示浏览器的工具栏。默认是 yes。
top=pixels窗口的 y 坐标。
width=pixels窗口的文档显示区的宽度。以像素计。

示例

点击按钮打开新的窗体，窗体大小为200 * 100，

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布道师学习通</title>
<script type="text/javascript">
function showEdu(){
open("https://www.budaos.com","budaos",'width=200,height=100');
}

</script>
</head>
<body>
<button onclick="showEdu()">布道师学习通</button>
</body>
</html>

关闭窗口

使用close方法可以关闭指定的窗体或标签。

语法

window对象.close()

示例

点击打开按钮打开新的窗体，窗体大小为200 * 100，再点击关闭按钮关闭窗体

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
let edu;
function openEdu(){
edu = open("https://www.budaos.com","budaos",'width=200,height=100');
}
function closeEdu(){
edu.close();
//关闭自己
//this.close();
}
</script>
</head>
<body>
<button onclick="openEdu()">打开</button>
<button onclick="closeEdu()">关闭</button>
</body>
</html>
avatar
文章
阅读
粉丝