js bom window对象

Hydrogen 发布于2019-08-22 18:07 / 2762人阅读

摘要：一全局作用域我们全局作用域定义了一个变量，对象下也能访问，证明在全局作用域下定义的变量，会自动纳入对象。另外，这两个方法都不适用于框架，只能对最外层的对象使用。

一、全局作用域

我们全局作用域定义了一个变量name，window对象下也能访问，证明在全局作用域下定义的变量，会自动纳入window对象。

var name = "Bob";

console.log(name); // Bob
console.log(window.name); // Bob

未声明的变量不能使用，并且会抛出未定义错误提示，但window下寻找未定义的变量，会抛出undefined，因为window对象查询是对象的一次查询属性。

console.log(age); // ReferenceError: age is not defined
console.log(window.age); // undefined

二、窗口位置

IE,Safari,Opera, Chome 都提供了screenLeft和screenTop属性，分别表示对窗口相对于屏幕的左边和上边的位置。

// 窗口位置
let leftPos = (typeof window.screenLeft === "number") ?
    window.screenLeft : window.screenX;

let topPos = (typeof window.screenTop === "number") ?
    window.screenTop : window.screenY;

console.log(leftPos, topPos);

这个例子运用二元操作符首先确定screenLeft和screenTop属性是否存在，如果是（在IE、Safari、Opera和Chrome中），则取得这两个属性的值。如果不存在（在Firefox中），则取得screenX和screenY的值。

三、窗口移动

需要注意的是，这两个方法可能会被浏览器禁用；而且，在Opera和IE 7（及更高版本）中默认就是禁用的。另外，这两个方法都不适用于框架，只能对最外层的window对象使用。

moveTo()和moveBy()方法倒是有可能将窗口精确地移动到一个新位置。这两个方法都接收两个参数，其中moveTo()接收的是新位置的x和 y坐标值，而moveBy()接收的是在水平和垂直方向上移动的像素数

//将窗口移动到屏幕左上角
window.moveTo(0,0);

//将窗向下移动100像素
window.moveBy(0,100);

//将窗口移动到(200,300)
window.moveTo(200,300);

//将窗口向左移动50像素
window.moveBy(-50,0);

四、窗口大小

let pageWidth = window.outerWidth,
    pageHeight = window.outerHeight;

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;
    }
}

console.log("pageWidth, pageHeight: ", pageWidth, pageHeight);

在以上代码中，我们首先将window.innerWidth和window.innerHeight的值分别赋给了pageWidth和pageHeight。然后检查pageWidth中保存的是不是一个数值；如果不是，则通过检查document.compatMode（这个属性将在第10章全面讨论）来确定页面是否处于标准模式。如果是，则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否则，就使用document.body.clientWidth和document.body.clientHeight的值。

// 调整浏览器窗口的大小
// resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽度和高度之差

//调整到100×100
window.resizeTo(100, 100);

//调整到200×150
window.resizeBy(100, 50);

//调整到 300×300
window.resizeTo(300, 300);

五、导航和打开窗口

使用window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口

// _self、_parent、_top或_blank。
window.open("https://baidu.com", "_blank");

// 等于
< a href="https://baidu.com" target="_blank">

// 打开窗口再关闭
var wroxWin = window.open("http://www.baidu.com/", "wroxWindow",
    "height=400,width=400,top=10,left=10,resizable=yes");


setTimeout(() => {
    wroxWin.close();
    console.log("end..");
}, 5000);

六、系统对话框

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

alert

alert("Hello world!")

confirm

if (confirm("Are you sure?")) {
    alert("I"m so glad you"re sure! ");
} else {
    alert("I"m sorry to hear you"re not sure. ");
}

prompt

var result = prompt("What is your name? ", "");
if (result !== null) {
    alert("Welcome, " + result);
}

云服务器 GPU云服务器 js_window对象属性 window对象 Window窗口对象 window对象的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95510.html

简简单单认识js里的Bom对象

摘要：里面的对象是什么是浏览器对象，全拼为都有什么对象是中的顶级对象，所有定义在全局作用域中的变量函数都会变成对象的属性和方法，在调用的时候可以省略。 js里面的Bom对象 showImg(https://segmentfault.com/img/remote/1460000010691602); Bom是什么？ Bom是浏览器对象，全拼为Browser Object Model Bom都有...

CoffeX 2019-08-20 18:53 评论0 收藏0
bom基础

摘要：里面的对象什么是是浏览器对象，全拼为浏览器对象模型是的缩写，简称浏览器对象模型提供了独立于内容而与浏览器窗口进行交互的对象由于主要用于管理窗口与窗口之间的通讯，因此其核心对象是由一系列相关的对象构成，并且每个对象都提供了很多方法与属性缺乏标 js里面的Bom对象什么是Bom Bom是浏览器对象，全拼为（Browser Object Model）浏览器对象模型 BOM是browser...

shusen 2019-08-20 18:54 评论0 收藏0
JS系列之BOM

摘要：顾名思义，父对象始终指向当前框架的直接上层框架。与框架有关的最后一个对象是，它始终指向实际上，和对象可以互换使用。同时，这也意味着可以将不同层次的对象连缀起来，例如。对象就是判断用户的浏览器以及操作系统。 BOM BOM Browser Object Model, 浏览器对象模型showImg(https://segmentfault.com/img/bVbjS3b?w=663&h=4...

edagarli 2019-08-26 13:25 评论0 收藏0
js bom location对象

摘要：一对象获取获取服务器名称和端口号获取服务器名称和端口号获取服务器名称和端口号获取不带端口号的服务器名称获取不带端口号的服务器名称获取整个获取整个返回中的目录和或文件名返回中的目录和或文件名返回的端口号返回的端口号返回的协议返回的协议返回的查一、location对象 http://localhost:8881/javascript/BOM/window.html?name=bob&ag...

Carson 2019-08-22 18:08 评论0 收藏0
js中的bom对象

摘要：在浏览器中，对象有双重角色，它既是通过访问浏览器窗口的一个接口，又是规定的对象。在集合中，可以通过数值索引从开始，从左至右，从上到下或者框架名称来访问相应的对象。 ECMAScript 是JavaScript 的核心，但如果要在Web 中使用JavaScript，那么BOM（浏览器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关....

dailybird 2019-08-21 10:44 评论0 收藏0
Javascript学习总结 - JS基础系列三

摘要：案例每隔毫秒调用函数并显示时间。当点击按钮时，停止时间代码如下计时器每隔毫秒调用函数，并将返回值赋值给计时器计时器，在载入后延迟指定时间后去执行一次表达式仅执行一次。该值标识要取消的延迟执行代码块。简述本系列将持续更新Javascript基础部分的知识，谁都想掌握高端大气的技术，但是我觉得没有一个扎实的基础，我认为一切高阶技术对我来讲都是过眼云烟，要成为一名及格的前端工程师，必须把...

zlyBear 2019-08-19 17:07 评论0 收藏0