19.1了解其他BOM对象-系统对话框、frames、history、location、navigator、screen

Window.open()
介绍：Window 接口的 open() 方法，创建一个新的浏览器窗口对象，如同使用文件菜单中的新窗口命令一样。strUrl 参数指定了该窗口将会打开的地址。如果strUrl 是一个空值，那么打开的窗口将会是带有默认工具栏的空白窗口（加载about:blank）。

语法：

var windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures];

参数：

• strUrl 要在新打开的窗口中加载的URL。

• strWindowName 新窗口的名称。

• strWindowFeatures 一个可选参数，列出新窗口的特征(大小，位置，滚动条等)作为一个DOMString。

例子：

var strWindowFeatures = `
    menubar=yes,
    location=yes,
    resizable=yes,
    scrollbars=yes,
    status=yes
`;

function openRequestedPopup() {
   
    window.open(
        "http://www.cctv.com/",
        "CCTV_WindowName",
        strWindowFeatures
    );
}



window.open(
  "https://www.domainname.ext/path/ImageFile.png",
  "DescriptiveWindowName",
  "resizable,scrollbars,status"
);

注意：

1. 如果已经存在以 strWindowName 为名称的窗口，则不再打开一个新窗口，而是把 strUrl 加载到这个窗口中。在这种情况下忽略参数 strWindowFeatures 。strUrl设为空字符串时，在窗口地址不改变。如果要在每次调用 window.open()时都打开一个新窗口，则要把参数 strWindowName 设置为 _blank。

2. strWindowFeatures 是一个可选的字符串，包含了新窗口的一组用逗号分割的特性，在窗口打开之后，就不能用JavaScript改变窗口的功能和工具栏的设置。如果名称是 strWindowName 的窗口不存在并且又没有提供 strWindowFeatures 参数（或者 strWindowFeatures 参数为空字符串），则子窗口以父窗口默认的工具栏渲染。

3. 如果 strWindowFeatures 参数中没有定义窗口大小，则新窗口的尺寸跟最近渲染的窗口尺寸一样。

4. 如果 strWindowFeatures 参数中没有定义窗口位置，则新窗口显示在最近渲染的窗口的坐标偏移22个像素的位置。这种新窗口偏移量的做法被浏览器开发商广泛地实现目的是提醒用户注意有新的窗口打开。如果最近使用的窗口是最大化的，则没有这22像素的偏移，新（子）窗口也会被最大化。

5. 如果你定义了 strWindowFeatures 参数，那么没有在这个字符串中列出的特性会被禁用或移除 （除了 titlebar 和 close 默认设置为yes）

Window.scroll()
滚动窗口到文档中的特定位置。
Window.scrollBy()
按给定的数量在窗口中滚动文档。

Window.scrollTo()
滚动到文档中的特定坐标集。

系统对话框

alert(msg)

介绍： 弹出对话框，显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。

语法：

window.alert(message);

alert(message);

参数：

• message：是要显示在对话框中的文本字符串,如果传入其他类型的值,会转换成字符串。

例子：

alert("Hello world!");

注意：对话框使用在无需用户确认的情况下,否则应该使用其他类型的对话框,比如confirm, prompt。对话框是弹出式(modal)的。 直到这个对话框被点击后, 后面的脚本才会运行. 请勿滥用此功能。

confirm(msg)

介绍：弹出警告框,返回布尔值。 confirm() 方法显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框 。

语法：

var result = window.confirm(message);

参数：

• message 是要在对话框中显示的可选字符串。
  返回值：
• result 是一个布尔值，表示是选择确定还是取消 (true表示确定)。

例子：

if (window.confirm("你想要离开本页面吗?")) {
  window.open("exit.html", "感谢你的访问!");
}

prompt(msg,default)

介绍：弹出输入框，返回消息或者null， prompt() 显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。

语法：

var result = window.prompt(text, value);

参数：

• text 用来提示用户输入文字的字符串，如果没有任何提示内容，该参数可以省略不写。
• value 文本输入框中的默认值，该参数也可以省略不写。不过在 Internet Explorer 7 和 8 中，省略该参数会导致输入框中显示默认值"undefined"。

返回值：

• result 用来存储用户输入文字的字符串，或者是 null。

例子：

var sign = prompt("你是什么星座的?");
if (sign == "狮子座"){
   alert("哇! 我也是狮子座的耶!");
}
// 有多种使用prompt方法的方式
var sign = window.prompt(); // 打开空的提示窗口
var sign = prompt();       // 打开空的提示窗口
var sign = window.prompt('你觉得很幸运吗?'); // 打开显示提示文本为"你觉得很幸运吗?"的提示窗口
var sign = window.prompt('你觉得很幸运吗?','是的'); // 打开显示提示文本为"你觉得很幸运吗?"并且输入框默认值为"是的"的提示窗口

当用户点击"确定"按钮后，文本输入框中的文字被返回。如果文本输入框中为空,则返回一个空字符串。如果用户点击"取消"按钮，则返回null。

注意：一个prompt对话框,包含一个单行文本框，一个“取消”按钮，一个“确定”按钮,在对话框关闭时，返回用户输入到文本框内的值(可能为空)。

窗口位置大小(这四个方法会被浏览器禁用)

         moveTo(x,y)//把当前窗口移动到屏幕的x,y坐标
         moveBy(x,y)//把当前窗口从当前状态偏移多少个像素,支持负数
         resizeTo(w,h)//改变窗口大小为制定高度
         resizeBy(w,h)//放大缩小窗口,支持负数

window对象常用事件

事件名	描述
onload()	页面资源全部加载完成后出发这个事件
onbeforeunload()	在页面关闭时触发这个事件
onscroll()	滚动窗口滚动条时触发

frames对象

介绍：是一个类数组对象，列出了当前窗口的所有直接子窗口；

语法：

frameList = window.frames;

frameList是一个frame对象的集合，它类似一个数组，有length属性且可以使用索引（[i]）来访问。

frameList === window 计算结果为true。

在window.frames类数组中的每一项都代表了窗口对应给定对象的<frame>或<iframe>的内容，而不是(i)frame DOM元素（即window.frames[ 0 ]与document.getElementsByTagName( “iframe” )[ 0 ].contentWindow是相同的）。

例子：

var frames = window.frames; 
for (var i = 0; i < frames.length; i++) {
  // 在这对frames的一个frame做点什么
  frames[i].document.body.style.background = "red";

}

history对象

介绍：该对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口；

属性:

• length: 返回浏览器历史列表中的URL数量

方法:

• back() 加载history列表中的前一个URL
• forward() 加载history 列表中的下一个URL
• go(intValue) 加载 history列表中的某个具体页面 其中intValue为正表示前进int个页面,反之则后退

例子：

var historyObj = window.history;
history.back();     // 等同于点击浏览器的回退按钮
history.go(-1);     //等同于history.back();

注意：

• 出于安全考虑，History对象不允许未授权代码访问会话历史（session History）中其它页面的URLs，但可以导航到其它会话历史（session History）指向的页面。

• 未授权代码无法清除会话历史（session History），也不能禁用回退/前进功能。

location对象，

介绍：window.location 是一个只读属性，返回一个 Location 对象，其中包含有关文档当前位置的信息。

注意：

• window.location 所有字母必须小写！

2. 尽管 window.location 是一个只读 Location 对象，你仍然可以赋给它一个 DOMString。这意味着您可以在大多数情况下处理 location，就像它是一个字符串一样：window.location = 'http://www.example.com'，是 window.location.href = 'http://www.example.com'的同义词 。

语法：

var oldLocation = location;

例子:

1. 导航到一个新页面

/*
只要赋给 location 对象一个新值，文档就会使用新的 URL 加载，就好像使用修改后的 URL 调用了  window.location.assign() 一样。需要注意的是，安全设置，如 CORS（跨域资源共享），可能会限制实际加载新页面。
*/ 
window.location.assign("http://www.baidu.com"); // or window.location = "http://www.baidu.com";

2. 强制从服务器重新加载当前页面

window.location.reload(true);

3. 使用 replace() 方法重新加载页面，并将 window.location.pathname 的值插入到 hash：

function reloadPageWithHash() {
  var initialPage = window.location.pathname;
  window.location.replace('http://example.com/#' + initialPage);
}

navigator对象

介绍：只读属性 Window.navigator 会返回一个 Navigator 对象的引用，可以用于请求运行当前代码的应用程序的相关信息,如:

• appName 浏览器的名称
• appVersion 浏览器的版本
• platfrom 操作系统
• userAgent 用户的代理信息,通过该属性可以获得浏览器及操作系统信息

PS: navigator属性只需要了解 geolocation:[object geolocation];HTML5新增属性 通过该对象获取浏览者的地理位置

语法：

navigatorObject = window.navigator

例子:

1. 检测浏览器并返回浏览器名称字符串

var sBrowser, sUsrAg = navigator.userAgent;

// 顺序在这里很重要，这可能会报告未列出浏览器的误报。

if (sUsrAg.indexOf("Firefox") > -1) {
  sBrowser = "Mozilla Firefox";
  // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
  sBrowser = "Opera";
  //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
} else if (sUsrAg.indexOf("Trident") > -1) {
  sBrowser = "Microsoft Internet Explorer";
  // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
} else if (sUsrAg.indexOf("Edge") > -1) {
  sBrowser = "Microsoft Edge";
  // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
} else if (sUsrAg.indexOf("Chrome") > -1) {
  sBrowser = "Google Chrome or Chromium";
  // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
} else if (sUsrAg.indexOf("Safari") > -1) {
  sBrowser = "Apple Safari";
  // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
} else {
  sBrowser = "unknown";
}

alert("当前浏览器为: " + sBrowser);

2. 检测浏览器并返回代表当前浏览器的索引数字

function getBrowserId () {
  var aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
      sUsrAg = navigator.userAgent,
      nIdx = aKeys.length - 1;

  for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);

  return nIdx;
}

console.log(getBrowserId());

screen对象

介绍：返回当前window的screen对象。screen对象实现了Screen接口，它是个特殊的对象，返回当前渲染窗口中和屏幕有关的属性。

语法:

screenObj = window.screen;

例子：

if (screen.pixelDepth < 8) {
  // use low-color version of page
} else {
  // use regular, colorful page
}