7、浏览器对象

最新推荐文章于 2020-08-31 17:37:23 发布

青叶的全栈之路

最新推荐文章于 2020-08-31 17:37:23 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/dream_AI/article/details/106243863

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

Window对象

关于BOM
Screen对象
Navigator对象
Window对象
Location对象
History对象

一、关于BOM

1.1、BOM是什么？

BOM（Browser Object Model）：浏览器对象模型。描述了与浏览器进行交互的一些方法和接口。

1.2、BOM的组成

Screen：显示器屏幕对象（了解）
Navigator：浏览器对象（了解）
Window：窗口对象（核心）
Location：地址栏对象
History：历史纪录对象

1.3、Window对象的特点

Window对象不需要创建，可以直接用window调用其属性、方法。window.方法名（）、window.属性名
window引用甚至可以省略，直接调方法和属性。方法名（）

二、Screen对象

三、Navigator对象

四、Window对象

4.1、说明

Window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为每个框架创建一个额外的 window 对象。
Window对象是全局对象，像window.alert()可以写成alert()。Window属性是全局属性，像window.location可以直接写成location。

4.2、属性

name：当前窗口的名称（title）
self：返回当前窗口的Window对象。
document：描述当前窗口内容的Document对象
event：返回当前窗口的事件描述对象
location：设置/返回当前窗口的URL。如果修改它会导致浏览器向目标URL跳转。
onload：页面资源（包括图片、媒体等）加载完成之后立即执行的某个方法。如：window.οnlοad=fun1

4.3、方法

1）、弹框

alert（String message）：显示一条消息并提供一个【确认】按钮的对话框。
confirm（String message）：显示一条消息并提供【确认】和【取消】按钮的对话框，该方法会返回boolean值。点击确定会返回true，点击取消(关闭等同于取消)会返回false。
prompt（String message [String default]）：显示一条消息并提供【文本录入框】、【确认】和【取消】按钮的对话框。点击确定按钮会返回用户录入的字符串(没有输入，返回"")，点击取消按钮返回null。

2）、窗口的关闭和打开

close（）：根据调用此方法的对象，关闭对应窗口，【火狐只能关闭由window.open()方法开启的窗口】。
open（String ULR, String name, String deatures, boolean replace）：打开一个窗口，返回新窗口的window对象。
1. ULR：网址 / 文件路径。如果不写或者写空值，则会创建一个空窗口
2. name：声明新窗口的名称。如果该名称已存在，则不会创建新窗口，且返回该名称窗口的引用。
3. features：一串字符串。由n个yes/no组成，代表了浏览器的各种标准，默认都是yes。
4. replace：控制窗口的打开方式。true代表新建，false代表覆盖。

3）、延时函数

setTimeout（表达式，毫秒值）：在指定毫秒后执行函数、表达式。返回延时函数的编号，用于取消。
clearTimeOut（int number）：立即取消指定延时函数的执行。
setInterval（表达式，毫秒值）：每隔一段时间重复执行该函数、表达式。
clearInterval（int number）：提前关闭循环定时器

4.4、使用

弹框

window.alert("这是一个没有返回值的弹框")；//没有返回值
var boolean1 = confirm("这个弹框会返回boolean值");//返回boolean值
var str = prompt("这个弹框会返回用户输入的文本");//返回用户输入的字符串，没有则返回空字符串

需要注意的是，这三种方法都会阻塞线程。也就是说在用户关掉对话框之前，不会有返回值，也意味着弹出一个对话框的同时，代码会停止运行。

打开、关闭窗口

<body>
    <input type="button" value="开启" id="open"><!--跳转按钮-->
    <input type="button" value="关闭" id="close"><!--关闭跳转按钮打开的窗口-->
    <script>
        var win;
        document.getElementById("close").onclick=function () {
            win.close();//关闭百度首页
        };
        document.getElementById("open").onclick=function () {
            win = window.open("https://www.baidu.com/");//打开百度首页
        };
    </script>
</body>

延时函数

<body>
    <textarea name="time" id="text" cols="30" rows="10"></textarea><br/>
    <input type="button" value="开始" id="start">
    <script>
        var condition = true;
        var number;
        document.getElementById("start").onclick=function (even) {//开始按钮事件
            if (condition){
                number = setInterval(getTime,1000);//调用循环延时函数
                even.target.value="停止";
            }else{
                clearInterval(number);//停止循环函数
                even.target.value="开始";
            }
            condition = !condition;
        };
        function getTime() {//在文本框内显示当前时间
            let date = new Date();
            let time =  date.toLocaleString();
            let text = document.getElementById("text");
            text.value=time;
        };
    </script>
</body>

页面跳转

window.location="http://www.baicu.com";//通过修改location属性实现页面跳转

五、History对象

History对象是Window对象的一部分，可以用window.history对其访问，主要是用来把窗口的浏览历史用文档和文档状态列表的形式表示。

1、属性

length：返回浏览器history列表中的元素数量

2、方法

back（）：相当于点击浏览器的后退按钮。
forward（）：相当于点击浏览器的前进按钮。
go（number）：加载history列表中的某一个URL，number的值决定了前进/后退多少次。

history.back();//后退一页
history.forward();//前进一页
history.go(-2);//后退两页
history.go(2)；//前进两页

六、Location对象

6.1、属性

host：设置/返回主机名和端口号
herf：设置/返回完整的URL
pathname：设置/返回当前URL的路径部分
port：设置/返回当前URL的端口号
protocol：设置/返回当前URL的协议

6.2、方法

reload（）：重新加载当前文档，刷新嘛！