BOM的顶层对象window

Posted 2021-03-09 lotus3904

BOM（Brower Object Model）浏览器对象模型

每打开一个浏览器，就会创建一个window对象（全局对象），所以BOM的顶层对象是window

window可以直接使用var声明的全局变量和字面量的全局函数，即window.属性和window.方法。

全局属性（即变量）与window属性的异同：

相同：使用时没有区别，都可以用window.属性

不同：在进行删除时，可以成功删除window.属性创建的变量，但无法删除全局属性（即var声明的全局变量）

var i=10;
window.name=20;

console.log(window.i);//10
console.log(window.name);//20,以对象添加属性的方式赋值

delete window.name;
delete window.i;
console.log(window.i);//10
console.log(window.name);//undefined

window的属性：

• 当前浏览器离屏幕的距离（以屏幕左上角为原点）
  • window.screenX
  • window.screenY
• 当前浏览器离屏幕左上角的距离
  • window.screenLeft //相当于X轴
  • window.screenTop // 相当于Y轴
• 浏览器的尺寸（仅视口，不包含控制台、滚动条）
  • window.innerWidth
  • window.innerHeight
• 浏览器的尺寸（包含控制台、滚动条）
  • window.outerWidth
  • window.outerHeight
• 滚动条的移动距离（可根据滚动条的位置决定是否显示某些内容，如返回顶部）
  • window.pageXOffset
  • window.pageYOffset

window的方法（即函数）：

• 提示框、警示框：window.alert();
• 确定框（返回布尔值）：window.confirm();
• 输入框（返回用户的输入内容）：window.propmt();
• 打开一个新窗口：window.open(参1，参2，参3，参4);
  • 参1：打开新页面的地址
  • 参2：打开方式，新页面_blank(默认值)或当前页面_self
  • 参3：设置新窗口的尺寸
  • 参4：是否替换当前历史记录true(替换)、false（不替换）
  • 关闭打开的窗口（可以打开新窗口，就可以关闭）
    • 创建一个变量接收这个新窗口信息
    • 以变量名.close();的方法关闭这个窗口
  • 设置新窗口的显示位置
    • 先声明一个变量来接收当前新窗口
    • 变量名.moveBy(参1，参2);——起点是屏幕的（0，0）点
    • 变量名.moveTo(参1，参2);——起点是窗口原来的位置