ch08 BOM

最新推荐文章于 2021-08-17 16:49:26 发布

大白Mango

最新推荐文章于 2021-08-17 16:49:26 发布

阅读量137

点赞数

分类专栏：啃红书系列文章标签：红皮书笔记 JavaScript高级程序设计笔记 JavaScript

本文链接：https://blog.csdn.net/lmq_buaa/article/details/85722606

版权

啃红书系列专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

BOM

1. Window 对象

1.1 全局作用域

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

但是，定义全局变量与在window对象上直接定义属性还是有一定差别：

全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以删除

var age = 29;
window.color = 'red';

// 在 IE<9 时抛出错误，在其他所有浏览器返回false
delete window.age;
// 在 IE<9 时抛出错误，在其他所有浏览器返回true
delete window.color;

alert(window.age); // 29，没删除成功
alert(window.color); // undefined，删除成功

1.2 窗口关系及框架

每个框架都拥有自己的window对象，并且保存在frames集合中。可以通过索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的window对象。每个window对象都有一个name属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>窗口关系及框架</title>
</head>
<frameset rows='160,*'>
    <frame src='frame.html' name='topFrame'>
    <frameset cols="50%,50%">
        <frame src='anotherFrame.html' name='leftFrame'>
        <frame src='yetAnotherFrame.html' name='rightFrame'>
    </frameset>
</frameset>
</html>

在这里插入图片描述

框架中有另一个框架的界面情况：

// main.html
<html>
<head>****
    <title>Frameset Example</title>
</head>
    <frameset rows="100,*">
        <frame src="frame.htm" name="topFrame">
        <frameset cols="50%,50%">
            <frame src="anotherframe.htm" name="leftFrame">
            <frame src="anotherframeset.htm" name="rightFrame">
        </frameset>
    </frameset>
</html>

// anotherframeset.htm
<html>
    <head>
        <title>Frameset Example</title>
    </head>
    <frameset cols="50%,50%">
        <frame src="red.htm" name="redFrame">
        <frame src="blue.htm" name="blueFrame">
    </frameset>
</html>

在这里插入图片描述

1.3 窗口位置

窗口位置可以由以下属性确定：

screenLeft，与screenX功能相同，优先使用前者。
screenTop,与screenY功能相同，优先使用前者。

兼容代码：

// 窗口距离屏幕左边的距离
var leftPos = (typeof window.screenLeft == 'number') ?
                window.screenLeft : window.screenX;
// 窗口距离屏幕上边的距离
var topPos = (typeof window.screenTop == 'number') ?
                window.screenTop : window.screenY;
console.log(leftPos);
console.log(topPos);

1.4 窗口大小

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
    if (document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

1.5 导航和打开窗口

window.open(url, target, str, boolean)
- url: 要加载的URL
- target: 窗口目标，该参数是已有窗口或框架的名称，
          也可以是_self、_parent、_top 或_blank。可选
- str: 特性字符串，可选
- boolean: 表示新页面是否取代浏览器历史记录中当前加载页面的布尔值，可选

看如下例子，看第二个参数的使用：
如果第二个参数所表示的窗口不存在，则会新创建一个窗口，并把它命名为第二个参数。

// 在名字为 topFrame 的窗口加载 url
< a href="http://www.wrox.com" target="topFrame"></a>
// 于上面的链接效果相同
window.open("http://www.wrox.com/", "topFrame");

第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性:
在这里插入图片描述

<button id='btn'>点击</button>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click', function() {
        console.log('hello');
        window.open('http://www.baidu.com', 'baiduWin', 'height=200, width=200,top=300,left=50,resizable=yes')
        
    })
</script>

在这里插入图片描述

window.open()方法会返回一个指向新窗口的引用。引用的对象与其他window 对象大致相似，但我们可以对其进行更多控制。

1.6 超时调用和间歇调用

setTimeOut()
setInterval()

这的例子可以看视频教程的例子更好一些。

1.7 系统对话框

三个同步的对话框：

alert()
confirm()
prompt

两个异步的对话框：

print() 打印对话框
find() 查找对话框

<button id="btn1">alert</button>
<button id="btn2">confirm</button>
<button id="btn3">prompt</button>
<button id="btn4">print</button>
<button id="btn5">find</button>
<script>
    document.getElementById('btn1').addEventListener('click', function() {
        window.alert('alert....');
    });
    document.getElementById('btn2').addEventListener('click', function() {
        window.confirm('Are you sure?');
    });
    document.getElementById('btn3').addEventListener('click', function() {
        window.prompt('What\'s your name?', 'Mango');
    });
    document.getElementById('btn4').addEventListener('click', function() {
        window.print();
    });
    document.getElementById('btn5').addEventListener('click', function() {
        window.find();
    });
</script>

在这里插入图片描述

2. location对象

location 对象是很特别的一个对象，因为它既是window 对象的属性，也是document 对象的属性；换句话说，window.location 和document.location 引用的是同一个对象。
在这里插入图片描述

2.1 解析查询字符串

function getQueryStringArgs(){
  //取得查询字符串并去掉开头的问号
  var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
  //保存数据的对象
  args = {},
  //取得每一项
  items = qs.length ? qs.split("&") : [],
  item = null,
  name = null,
  value = null,
  //在for 循环中使用
  i = 0,
  len = items.length;
  //逐个将每一项添加到args 对象中
  for (i=0; i < len; i++){
    item = items[i].split("=");
    name = decodeURIComponent(item[0]); // 解码
    value = decodeURIComponent(item[1]);
    if (name.length) {
      args[name] = value;
    }
  }
  return args;
}

2.2 位置操作（网址）

location.assign("http://www.wrox.com")
location.replace("http://www.wrox.com/")
location.reload()

location.assign("http://www.wrox.com");
// 下面会自动调用assign方法
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

每次修改location 的属性（hash 除外），页面都会以新URL 重新加载。

replace()方法只接受一个参数，即要导航到的URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。

<!DOCTYPE html>
<html>
<head>
    <title>You won't be able to get back here</title>
</head>
<body>
    <p>Enjoy this page for a second, because you won't be coming back here.</p>
    <script type="text/javascript">
        setTimeout(function () {
            location.replace("http://www.wrox.com/"); // 跳转后，回退按钮失效
        }, 1000);
    </script>
</body>
</html>

location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）

3. navigator对象

navigator对象的属性通常用于检测显示网页的浏览器类型。

在这里插入图片描述

3.1 检测插件

暂时不记录

3.2 注册处理程序

暂时不记录

4. screen对象

功能有限暂不记录

5. history对象

功能有限暂不记录

大白Mango

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ch08 BOM

文章目录BOM1. Window 对象1.1 全局作用域1.2 窗口关系及框架1.3 窗口位置1.4 窗口大小1.5 导航和打开窗口1.6 超时调用和间歇调用1.7 系统对话框2. location对象2.1 解析查询字符串2.2 位置操作（网址）3. navigator对象3.1 检测插件3.2 注册处理程序4. screen对象5. history对象BOM1. Window 对象1.1...
复制链接

扫一扫

专栏目录