一.概述

BOM编程主要指允许JavaScript与浏览器进行对话。

Window 对象

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

二.弹出框

警告框：

window.alert(“sometext”);

确认框：

window.confirm(“sometext”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        window.alert("Hello World");//提示框

        var r = confirm("请按按钮");//确认框
        if (r == true) {
     
     
            x = "您按了确认！";
        } else {
     
     
            x = "您按了取消！";
        }

    </script>
</body>
</html>

提示框：

window.prompt(“sometext”,“defaultText”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        window.onload = function(){
     
     
            document.getElementById("button").onclick = function(){
     
     //提示框
                var person = prompt("请输入姓名:","Jack");
                var txt;
                if (person == null || person === "") {
     
     
                    txt = "用户取消输入";
                }
                else {
     
     
                    txt = "你好，" + person + "！今天过得好吗？";
                }
                document.getElementById("demo").innerHTML = txt;
            }
        }
    </script>
    <input type = "button" id = "button" value = "请点击按钮"/>
    <p  id = "demo"></p>
</body>
</html>

三.窗口

打开窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">

    </script>
    <input type = "button" value = "开启百度新的窗口" onclick = "window.open('http://www.baidu.com')"/>
    <input type = "button" value = "开启百度(当前窗口)" onclick = "window.open('http://www.baidu.com'), '_self'"/>
    <input type = "button" value = "开启百度(新窗口)" onclick = "window.open('http://www.baidu.com'), '_blank'"/>
    <input type = "button" value = "开启百度(父窗口)" onclick = "window.open('http://www.baidu.com'), '_parent'"/>
    <input type = "button" value = "开启百度(顶级窗口)" onclick = "window.open('http://www.baidu.com'), '_top'"/>
</body>
</html>

打开一个弹窗的语法是 window.open(url, name, params)：

url

要在新窗口中加载的 URL。

name

新窗口的名称。每个窗口都有一个 window.name，在这里我们可以指定哪个窗口用于弹窗。如果已经有一个这样名字的窗口 —— 将在该窗口打开给定的 URL，否则会打开一个新窗口。

params

新窗口的配置字符串。它包括设置，用逗号分隔。参数之间不能有空格，例如：width=200,height=100。

params 的设置项：

位置:

left/top（数字）—— 屏幕上窗口的左上角的坐标。这有一个限制：不能将新窗口置于屏幕外》》（offscreen）。
width/height（数字）—— 新窗口的宽度和高度。宽度/高度的最小值是有限制的，因此不可能创建一个不可见的窗口。

窗口功能：
menubar（yes/no）—— 显示或隐藏新窗口的浏览器菜单。
toolbar（yes/no）—— 显示或隐藏新窗口的浏览器导航栏（后退，前进，重新加载等）。
location（yes/no）—— 显示或隐藏新窗口的 URL 字段。Firefox 和 IE 浏览器不允许默认隐藏它。
status（yes/no）—— 显示或隐藏状态栏。同样，大多数浏览器都强制显示它。
resizable（yes/no）—— 允许禁用新窗口大小调整。不建议使用。
scrollbars（yes/no）—— 允许禁用新窗口的滚动条。不建议使用。

关闭窗口

关闭一个弹窗的语法是 window.open( )；

四.Location

Window Location
window.location 对象可不带 window 前缀书写。

一些例子：

window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档

五.History

history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器中点击前进按钮

Java全栈学习：JavaScript---BOM编程

文章目录