JavaScriptBOM操作

黑夜中的天空 2021-02-23 15:29:11
java 博客园 操作 javascriptbom


       BOM(浏览器对象模型)主要用于管理浏览器窗口,它提供了大量独立的、可以与浏览器窗口进行互动的功能,这些功能与任何网页内容无关。浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。

1.1使用window对象

window对象是BOM的核心,代表浏览器窗口的一个实例。在全局作用域中声明的所有变量和函数也是window对象的属性和方法。

1.1.1 访问浏览器窗口

通过window对象可用访问浏览器窗口。

浏览器对象简单说明如下:

window

客户端JavaScript中的顶层对象。

navigator

包含客户端有关浏览器的信息。

screen

包含客户端显示屏的信息。

history

包含浏览器窗口访问过的URL信息。

location

包含当前网页文档的URL信息。

document

包含整个HTML文档,可被用来发访问文档内容,及其所有页面元素。

1.1.2全局作用域

客户端JavaScript代码都在全局上下文环境中运行,window对象提供了全局作用域。

下面用法:

var a = '我是程序员';
window.b = 'window.b';
c = '我喜欢js';
document.write(delete window.a);
document.write(delete window.b);
document.write(delete window.c + '<br>');
document.write(window.a);
document.write(window.b);
document.write(window.c);

使用var语句声明全局变量,window会为这个属性定义一个名为‘configgurable’的特性。

1.1.3 使用系统测试方法

window对象定义了3个人机交互的接口方法:

  1.  alert():简单的提示对话框,由浏览器向用户弹出提示性信息。该方法包含一个可选的提示信息参数。

  2.  confirm():简单的提示对话框,由浏览器向用户弹出提示性信息。不过该方法弹出的对话框包含两个按钮,‘确认’和‘取消’。

  3.  prompt():弹出提示对话框,可以接收用户输入的信息,并把用户输入的信息返回。

用法1:

var user = prompt('请输入你的用户名:');
if (!!user) {
var ok = confirm('你输入的用户名为:\n' + user + '\n请确认。');
if (ok) {
document.write('欢迎您:\n' + user);
} else {
user = prompt('请重新输入你的用户名:');
document.write('欢迎您:\n' + user);
}
} else {
user = prompt('请输入你的用户名:');
}

       这3个仅接收纯文本信息,用户只能使用空格换行符各种符号来格式化提示对话框中的显示文本。不同浏览器对于这3个对话框的显示效果略有不同。

用法2

window.alert = function (title, info) {
var box = document.getElementById('alert_box');
var html = '<dl><dt>' + title + '</dt><dd>' + info + '</dd><\/dl>';
if (box) {
box.innerHTML = html;
box.style.display = 'block';
} else {
var div = document.createElement('div');
div.id = 'alert_box';
div.style.display = 'block';
document.body.appendChild(div);
div.innerHTML = html;
}
}
alert('我是程序员', '我喜欢Js!');

1.1.4 控制窗口位置

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

下面用法:

window.moveTo(0, 0);
window.moveBy(0, 100);
window.moveTo(200, 300);
window.moveBy(-50, 0);

1.1.5 使用定时器

window对象包含4个定时器专用方法,使用他们可以实现倒霉定时运行,避免连续运行。就可以设计动画。

1. setTimeout()方法

定义:

setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

语法:

var o=setTimeout(code,millisec)

参数:

code (必需。要延时执行的代码字符串。)
millisec 必需。在执行代码前需等待的毫秒数。)


下面用法:

var o = document.getElementsByTagName('body')[0].childNodes;
for (var i = 0; i < o.length; i++) {
o[i].onmouseover = function (i) {
return function () {
f(o[i]);
}
}(i);
}
function f(o) {
var out = setTimeout(function () {
document.write(o.tagName);
}, 500);
}

2. clearTimeout()方法

定义:

clearTimeout()方法可取消由setTimeout()方法设置的timeout。

语法:

clearTimeout(id_of_settimeout)

参数:

id_of_settimeout(由setTimeout()返回的ID值。该值标识要取消的延迟执行代码块。)

下面用法:

var o = document.getElementsByTagName('body')[0].childNodes;
for (var i = 0; i < o.length; i++) {
o[i].onmouseover = function (i) {
return function () {
f(o[i]);
}
}(i);
o[i].onmouseout = function (i) {
return function () {
clearTimeout(o[i].out);
}
}(i);
}
function f(o) {
o.out = setTimeout(function () {
document.write(o.tagName);
}, 500);
}

3. Setlnterval()方法

定义:

setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval()方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。

语法:

setInterval(code,millisec[,"lang"])

参数:

code(必需。要调用的函数或要执行的代码串。)

millisec(必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。)

下面用法:

var t = document.getElementsByTagName('input')[0];
var i = 959;
var out = setInterval(f, /*24 * 60 * 60 */ 1000);
function f() {
t.value = i--;
if (i <= 0) {
crearTimeout(out);
document.write('冬奥会已到!');
}
}

       在动画设计中,setInterval()方法适合在不确定的时间内持续执行某个动作,而setInterval()方法适合在有限的时间内执行可以确定起点和终点的动画。

1.2 使用navigator对象

navigator对象包含了浏览器的基本信息,如名称、版本和系统等。利用它的属性来读取客户端基本信息。

1.2.1 浏览器检测方法

浏览器检测的方法有多种。

常用方法包括2种:

特征检测法

字符串检测法

1. 特征检测法

特性检测法就是根据浏览器是否支持特定功能来决定操作的方式。

下面用法:

if (document.getElementsByName) {
var a = document.getElementsByName('p');
} else if (document.getElementsByTagName) {
var a = document.getElementsByTagName('p');
}

2. 字符串检测法

使用用户代理字符串检测浏览器类型。

下面用法:

var s = window.navigator.userAgent;
console.log(s);

1.2.2 检测插件

可以使用navigator对象的plugins属性实现。而plugins是一个数组。

该数组中的每一项都包含下列属性:

name

插件的名字。

description

插件的描述。

filename

插件的文件名。

length

插件所处理的MIME类型。

下面用法:

function hasPlugin(name) {
name = name.toLowerCase();
for (var i = 0; i < navigator.plugins.length; i++) {
if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
return true;
}
}
return false;
}
document.write(hasPlugin('Flash'));
document.write(hasPlugin('QuickTime'));
document.write(hasPlugin('Java'));

1.3 使用location对象

location对象存储当前页面与位置相关的信息,表示当前显示文档的Web地址。使用location对象,结合字符串方法可以抽取URL中查询字符串的参数值。

用法1:

var queryString = function () {
var q = location.search.substring(1);
var a = q.split('&');
var o = {};
for (var i = 0; i < a.length; i++) {
var n = a[i].indexOf('=');
if (n == -1) continue;
var v1 = a[i].substring(o, n);
var v2 = a[i].substring(n + 1);
o[v1] = unescape(v2);
}
return o;
};
var f1 = queryString();
for (var i in f1) {
document.write(i + '=' + f1[i]);
}

用法2跳转网页。

location = 'http://www.bj-xinhua.com/?bdpz';

1.4 使用history对象

      history对象存储浏览器窗口的浏览历史,通过window对象的history属性可以访问该对象。实际上,history对象存储最近访问的、有限条目的URL信息。为了保护客户端浏览信息的安全和隐私,history对象禁止Js脚本直接操作这些访问信息。

history对象允许使用length属性读取列表中URL的个数,并可以调用back()、forward()和go()方法访问数组中的URL。

  1. back():返回到前一个URL。

  2. forward():访问下一个URL。

  3. go():该方法比较灵活,它能根据参数决定可访问的URL。

  • 该参数是正整数,浏览器就会在历史列表中向前移动;该参数是负整数,浏览器就会在历史列表中向后移动;
  • 参数为一个字符串,则history对象能够从浏览历史中检索包含该字符串的URL,并访问第一个检索到的URL。

下面用法:

frames[1].history.back();

1.5 使用screen对象

screen对象存储客户端屏幕信息,这些信息可以用来探测客户端硬件的基本配置。满足不同用户的显示要求。

下面用法:

function center(url) {
var w = screen.availWidth / 2;
var h = screen.availHeight / 2;
var t = (screen.availHeight - h) / 2;
var l = (screen.availWidth - w) / 2;
var p = 'top=' + t + ',left=' + l + ',width=' + w + ',height=' + h;
var win = window.open(url, 'url', p);
win.focus();
}
center('file:///D:/jsBOM%E6%93%8D%E4%BD%9C/11history.html');

1.6 使用document对象

在浏览器窗口中,每个widow对象都会包含一个document属性,该属性引用窗口中显示HTML文档的document对象。

1.6.1 动态生成文档内容

下面用法:

window.onload = function () {
document.body.onclick = f;
}
function f() {
parent.frames[1].document.open();
parent.frames[1].document.write('<h2>我是程序员</h2>');
parent.frames[1].document.close();
}
版权声明
本文为[黑夜中的天空]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/hjy0806/p/14432606.html

  1. Redis solves cache, breakdown and avalanche
  2. redis
  3. Knight card: build a message center based on Kafka, and push hundreds of millions of messages easily
  4. Oracle OCP 19c 认证1Z0-083考试题库(第2题)
  5. redis的三种模式
  6. kubernetes和docker----2.学习Pod资源
  7. 谈一谈如何远程访问MySQL(腾讯云,云主机)
  8. Linux(五):Linux的文档编辑器Vi
  9. Oracle OCP 19C certification 1z0-083 examination question bank (question 2)
  10. 云原生项目实践DevOps(GitOps)+K8S+BPF+SRE,从0到1使用Golang开发生产级麻将游戏服务器—第6篇
  11. kubernetes和docker----2.学习Pod资源
  12. JSP基于Java开发Web应用程序特点有哪些?
  13. Three modes of redis
  14. Kubernetes and docker -- 2. Learning pod resources
  15. Linux (5): the document editor VI of Linux
  16. Cloud native project practice Devops (gitops) + k8s + BPF + SRE, using golang to develop production level mahjong game server from 0 to 1
  17. Kubernetes and docker -- 2. Learning pod resources
  18. What are the characteristics of JSP developing web application based on Java?
  19. Lottie error: java.lang.AssertionError : android.util.JsonReader .peek
  20. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  21. docker入门到熟练
  22. Java之HTTP网络编程(一):TCP/SSL网页下载
  23. Introduction to docker
  24. HTTP network programming in Java (1): TCP / SSL web page download
  25. mysql 的ACID以及隔离级别
  26. Acid and isolation level of MySQL
  27. Java序列化对字段名的影响
  28. The influence of Java serialization on field names
  29. Redis 日志篇:系统高可用的杀手锏
  30. Java中把一个对象复制给另外一个对象引发的思考
  31. Java之HTTP网络编程(一):TCP/SSL网页下载
  32. Redis log: the killer of system high availability
  33. Thinking about copying one object to another in Java
  34. HTTP network programming in Java (1): TCP / SSL web page download
  35. 数据库--oracle安装配置(本地安装的步骤及各种问题解决方案)
  36. 从事Java9年,27天熬夜把近年遇到的面试题收录成册全网开源!
  37. Database -- Oracle installation configuration (local installation steps and various problem solutions)
  38. Engaged in Java for 9 years, 27 days stay up late, the interview questions encountered in recent years included into a volume, the whole network open source!
  39. Java序列化 / 调用 Wildfly 服务接口异常:EJBCLIENT000409
  40. docker-compose部署Estack
  41. Redis 日志篇:系统高可用的杀手锏
  42. Java中把一个对象的值复制给另外一个对象引发的思考
  43. Java serialization / call wildfly service interface exception: ejbclient000409
  44. Docker compose deploy stack
  45. Mac下查看已安装的jdk版本及其安装目录
  46. Redis log: the killer of system high availability
  47. mybatis映射xml配置文件报错:<statement> or DELIMITER expected, got ‘id‘
  48. Thinking about copying the value of one object to another in Java
  49. IntelliJ IDEA 还能画思维导图,果然最强 IDE!
  50. vue使用sdk进行七牛云上传
  51. IntelliJ IDEA 还能画思维导图,果然最强 IDE!
  52. Spring原来还可以这么玩!阿里新产Spring全线宝典成功颠覆了我对Spring的认知!
  53. View the installed JDK version and its installation directory under mac
  54. Error in mybatis mapping XML configuration file: < statement > or delay expected, got 'ID‘
  55. IntelliJ IDEA 还能画思维导图,果然最强 IDE!
  56. Javascript性能优化【内联缓存】 V8引擎特性
  57. IntelliJ idea can also draw mind maps. It's really the strongest ide!
  58. Vue uses SDK to upload Qi Niu cloud
  59. IntelliJ idea can also draw mind maps. It's really the strongest ide!
  60. 深入理解 Web 协议 (三):HTTP 2