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

一.概述

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() - 等同于在浏览器中点击前进按钮

猜你喜欢

转载自blog.csdn.net/weixin_45965358/article/details/114284016