JS Browser BOM

JS Browser BOM　　来之 3WSCHOOL

 -- (自定义学习版)　　

这里讲解 JavaScript BOM 对象啊：

Window - 浏览器对象模型（窗口对象模型）

Window 对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性：

蛮重要的啊  所以啊 可以不用写 直接用.

 

window.document.getElementById("header");

等同于：

document.getElementById("header");

 

 

 

窗口尺寸

两个属性可用用于确定浏览器窗口的尺寸。

这两个属性都以像素返回尺寸：

  • window.innerHeight - 浏览器窗口的内高度（以像素计）
  • window.innerWidth - 浏览器窗口的内宽度（以像素计）

　　　但不包括工具栏和滚动条。

　　例：

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或

  • document.body.clientHeight
  • document.body.clientWidth

例：(自己复制在script中试试！)

var h = window.innerHeight;
var w = window.innerWidth;
document.write("高：" + h + "<pre>\n</pre>" + "宽" + w);

    document.writeln("<pre>\n</pre> ---------- <pre>\n</pre>");

    /*第二种：*/
var h = document.body.clientWidth;
var w = document.body.clientHeight;
document.write("高：" + h + "<pre>\n</pre>" + "宽" + w);

反正我觉得不多准啊 自己去测试啊  前端烦死了....搞这搞那的...

 

 

-------------------------------------------------------------------------------------------

其他窗口方法

一些其他方法：

  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() -移动当前窗口
  • window.resizeTo() -重新调整当前窗口

 

接下来一一介绍：

 

  • window.open() 

定义和用法

 

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

 

语法

window.open(URL,name,features,replace)
参数描述
URL 一个可选的字符串，声明了要在新窗口中显示的文档的 URL可选。如果没有指定URL，打开一个新的空白窗口
name 可选。指定target属性或窗口的名称。支持以下值：
  • _blank - URL加载到一个新的窗口。这是默认
  • _parent - URL加载到父框架
  • _self - URL替换当前页面
  • _top - URL替换任何可加载的框架集
  • name - 窗口名称
features 可选。一个逗号分隔的项目列表。支持以下值：

channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels 窗口的高度。最小.值为100
left=pixels 该窗口的左侧位置
location=yes|no|1|0 是否显示地址字段.默认值是yes
menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes
top=pixels 窗口顶部的位置.仅限IE浏览器
width=pixels 窗口的宽度.最小.值为100
replace

 

一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

  • true - URL 替换浏览历史中的当前条目。
  • false - URL 在浏览历史中创建新的条目。

提示和注释

特别注意一下 name 这个参数啊 如果打开的窗口中存在这个name 那么就不会打开了啊  即：不存在name的窗口我才新建一个窗口给你的啊.

还有就是啊：如果浏览器阻止弹出窗口 那么会返回null啊  因此可以将这个语句放入到try - cathch中啊！  

重要事项：请不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同。为了使您的代码清楚明白，请使用 Window.open()，而不要使用 open()。

犯法返回一个窗口对象 可以用此对象操作新建的窗口 例：

function openWin(){
    myWindow=window.open('','','width=200,height=100');
    myWindow.document.write("<p>这是'我的窗口'</p>");
    myWindow.focus();
}

 

 

 

Window close() 方法

定义和用法

close() 方法用于关闭浏览器窗口。

直接关闭 没什么其他的..

 

 

  • window.moveTo() -移动当前窗口

    定义和用法

    moveTo() 方法可把窗口的左上角移动到一个指定的坐标。

    语法

    window.moveTo(x,y)

　　例： 将新窗口移动到x为0y为0 即：左上角~

function moveWin(){
    myWindow.moveTo(0,0);
    myWindow.focus();
}

 

 

 

 window.resizeTo() -重新调整当前窗口

 

定义和用法

resizeTo() 方法用于把窗口大小调整为指定的宽度和高度。

语法

resizeTo(width,height)
参数描述
width 必需。想要调整到的窗口的宽度。以像素计。
height 可选。想要调整到的窗口的高度。以像素计。
这个也没什么好说 自己写啊 

 

 

 以上几个窗口的4个方法 主要还是先要获取到window对象啊.

 

 

Window Screen  窗口屏幕对象

 

window.screen 对象不带 window 前缀也可以写：

属性：

  • screen.width　
  • screen.height　
  • screen.availWidth
  • screen.availHeight
  • screen.colorDepth
  • screen.pixelDepth
 
1.screen.width 属性返回以像素计的访问者屏幕宽度。

例:document.writeln(screen.width);

2.screen.height 属性返回以像素计的访问者屏幕的高度。

例:document.writeln(screen.height);

3.screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。

例:document.writeln(screen.availWidth);

4.screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。

例:document.writeln(screen.availHeight);

5.screen.colorDepth 属性返回用于显示一种颜色的比特数。

所有现代计算机都使用 24 位或 32 位硬件的色彩分辨率：

  • 24 bits =16,777,216 种不同的 "True Colors"
  • 32 bits = 4,294,967,296 中不同的 "Deep Colors"

更老的计算机使用 14 位：65,536 种不同的 "High Colors" 分辨率。

异常古老的计算机，以及老式的手机使用 8 位：256 中不同的 "VGA colors"。

例：document.writeln(screen.colorDepth);

6.screen.pixelDepth 属性返回屏幕的像素深度。

例：document.writeln(screen.pixelDepth);

对于现代计算机，颜色深度和像素深度是相等的。

貌似这几个函数除了1和2  其他没什么软用..

 

Location对象这里不说啊 具体在JavaScript分区的location三个犯法会用即可：
属性哪里也有啊：

Location 对象方法

可以在Location对象上使用以下方法：
方法描述
assign() 加载新文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档

 

 

History：历史
window.history 对象包含浏览器历史。

window.history 对象可不带 window 书写。

为了保护用户的隐私，JavaScript 访问此对象存在限制。

对象方法：

  • history.back() - 等同于在浏览器点击后退按钮
  • history.forward() - 等同于在浏览器中点击前进按钮

 

1.history.back() 

history.back() 方法加载历史列表中前一个 URL。

这等同于在浏览器中点击后退按钮。

 

2.

 

history forward() 方法加载历史列表中下一个 URL。

 

这等同于在浏览器中点击前进按钮。

 

 

 window.navigator 对象包含有关访问者的信息。

https://www.cnblogs.com/bi-hu/p/14696195.html 看这个啊 之前学过了不说了

 

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。

 这也不说啊 自己看 ：https://www.cnblogs.com/bi-hu/p/14763451.html

 

 

 

Timing 事件 计时器啊  就是 那个....也学过的啦 就是 那玩意 setTimeout(function, milliseconds) 和 setInterval(function, milliseconds) 这玩意啊！

 

Cookies  对象

什么是 cookie？

Cookie 是在您的计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。

Cookie 是为了解决“如何记住用户信息”而发明的：

  • 当用户访问网页时，他的名字可以存储在 cookie 中。
  • 下次用户访问该页面时，cookie 会“记住”他的名字。

Cookie 保存在名称值对中，如：

username = Bill Gates

当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。

 

通过 JavaScript 创建 cookie

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

通过 JavaScript，可以这样创建 cookie：

document.cookie = "username=Bill Gates";

您还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";

通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

　　//不知道你看懂没 反正我是没看懂啊..其实你cookie要有东西复制给他就行了..

 

 

 

通过 JavaScript 读取 cookie

通过 JavaScript，可以这样读取 cookie：

document.cookie = "name = hgy";
var xx = document.cookie;
document.writeln(xx);

 

google 不行啊 读取不出来啊！火狐就可以啊！

可以自己试试啊

 

 

通过 JavaScript 改变 cookie

通过使用 JavaScript，你可以像你创建 cookie 一样改变它：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
直接改啊

旧 cookie 被覆盖。

 

通过 JavaScript 删除 cookie

删除 cookie 非常简单。

删除 cookie 时不必指定 cookie 值：

直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
其实吧！你也可以直接暴力点 管他干啊：
document.cookie = '';

您应该定义 cookie 路径以确保删除正确的 cookie。

如果你不指定路径，一些浏览器不会让你删除 cookie。

 

cookie 字符串

document.cookie 属性看起来像一个正常的文本字符串。什么（什么看起来像啊  简直就是原模原样！妈耶）但它不是。

即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。

如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：

cookie1 = value; cookie2 = value;

显示所有 cookie 创建 cookie 1 创建 cookie 2 删除 cookie 1 删除 cookie 2

如果你想找到一个指定 cookie 的值，你必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值

 

别管那么多 知道怎么创建删除差不都了 前段烦死了 妈耶！！！

具体创建 查询 什么什么的方法 自己写啊！

好了啊！  BOM差不都了 哎 主要还是那么几个用的比较多啊！

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2021-05-15 15:10  咸瑜  阅读(105)  评论(0)  编辑  收藏  举报