BOM-window

07-1-浏览器BOM-window

window：代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象）
Navigator ：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器
Location：代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息
History：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作（出于对用户的隐私考虑，我们只能拿到当前的浏览记录，不能拿到所有的历史记录）
Screen：代表用户的屏幕信息

演示全局作用域

window对象是js中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。

var age = 123;
console.log(window.age);


var age = 123;
console.log(age);

function test(){
  var name = "zhangsan";
  console.log(window.age);
}

console.log(window.test());

实验效果

images

窗口导航

使用 window.open()方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。window.open() 具有四个参数url,target,feature,replace。

url ：网址（我们要访问的地址）
target ：窗口位置
- _top 或 _blank
- _parent
- _self
feature：窗口特征,通过逗号分隔的名值对列表。
- fullscreen
  - yes/no
- height
  - 数值表示新窗口的高度。不能小于100
- left
  - 表示新窗口的左坐标。不能是负值
- location
  - yes、no
  - 表示是否在浏览器窗口中显示地址栏。
  - 不同浏览器的默认值不同。如果设置为no，地址栏可能会隐藏，也可能会被禁用(取决于浏览器)
- menubar
  - yes/no
  - 表示是否在浏览器窗口中显示菜单栏。默认值为no
- resizable
  - yes/no
  - 表示是否可以通过拖动浏览器窗口的边框改变其大小。默认值为no
- scrollbars
  - yes/no
  - 表示如果内容在视口中显示不下，是否允许滚动。默认值为no
- status
  - yes/no
  - 表示是否在浏览器窗口中显示状态栏。默认值为no
- toolbar
  - yes/no
  - 表示是否在浏览器窗口中显示工具栏。默认值为no
- top
  - 表示新窗口的上坐标。不能是负值
- width
  - 表示新窗口的宽度。不能小于100
replace：

演示实例

window.open("http://www.baidu.com")
window.open("http://www.baidu.com","_blank")
window.open("http://www.baidu.com","_blank","height=400,width=400,top=10,left=10,resizable=yes");

实验效果

images

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

var testWin = window.open("http://www.wrox.com/",
													"wroxWindow",
													"height=400,width=400,top=10,left=10,resizable=yes");

//调整大小 testWin.resizeTo(500,500);
//移动位置 testWin.moveTo(100,100);
//关闭窗口 testWin.close();

系统对话框

浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息。

alert()方法的结果就是向用户显示一个系统对话框

images

confirm() 除了显示 OK 按钮外，还会显示一个 Cancel(“取消”)按钮，
- true 表示单击了 OK
- false 表示单击了 Cancel 或单击了右上角的 X 按钮

images

if (confirm("Are you ok ?")){
    console.log(true);
} else {
    console.log(false);
}

prompt() 提示框，用于提示用户输入一些文本。
- 提示框中除了显示 OK 和 Cancel 按钮之外，还会显示一个文本输入域，以供用户在其中输入内容。
- prompt()方法接受两个参数:要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)

images

prompt("What's your name?","Michael")

调用打印： window.print();

images