首页 > 其他分享 >JS中的浏览器对象

JS中的浏览器对象

时间:2023-07-10 14:55:06浏览次数:42  
标签:浏览器 对象 JavaScript JS window location navigator document

作为一种脚本语言,JavaScript 代码不能独立运行,通常情况下我们需要借助浏览器来运行 JavaScript 代码,所有 Web 浏览器都支持 JavaScript。

除了可以在浏览器中执行外,也可以在服务端或者搭载了 JavaScript 引擎的设备中执行 JavaScript 代码,浏览器之所以能够运行 JavaScript 代码就是因为浏览器中都嵌入了 JavaScript 引擎,常见的 JavaScript 引擎有:

  • V8:Chrome 和 Opera 中的 JavaScript 引擎;
  • SpiderMonkey:Firefox 中的 JavaScript 引擎;
  • Chakra:IE 中的 JavaScript 引擎;
  • ChakraCore:Microsoft Edge 中的 JavaScript 引擎;
  • SquirrelFish:Safari 中的 JavaScript 引擎。

BOM

BOM(Browser Object Model)是浏览器对象模型的缩写。按照面向对象的编程思想,将浏览器抽象为几大对象,包括window、navigator、 location、screen、history、document。

window

window对象是一个全局对象,navigator、location、location、screen、history、document都是windows的成员对象。同时,window也表示浏览器窗口。

复制代码
  window.alert("欢迎访问");  //提示框
  window.confirm("您是否确定?"); //询问框
  window.prompt("请输入");  //输入框
  window.setInterval(1000);  //设定时间间隔,时间单位:毫秒 
  window.clearInterval(); //清除时间间隔
  window.setTimeout(1000); //倒计时多少时间以后执行函数,时间单位:毫秒
  window.open();  //打开窗体
  window.close(); //关闭窗体
  window.innerHeight; //浏览器窗体的内高
  window.innerWidth;//浏览器窗体的内宽
  window.outerHeight;//浏览器窗体的外高
  window.outerWidth; //浏览器窗体的外宽        
复制代码

navigator

navigator对象表示浏览器的信息,最常用的属性包括:

  • navigator.appName:浏览器名称;
  • navigator.appVersion:浏览器版本;
  • navigator.language:浏览器设置的语言;
  • navigator.platform:操作系统类型;
  • navigator.userAgent:浏览器设定的User-Agent字符串。
  console.log('appName = ' + navigator.appName);
  console.log('appVersion = ' + navigator.appVersion);
  console.log('language = ' + navigator.language);
  console.log('platform = ' + navigator.platform);
  console.log('userAgent = ' + navigator.userAgent);

screen

屏幕对象

  • screen.height:屏幕高度
  • screen.width:屏幕宽度
  • screen.colorDepth:颜色位数
  console.log(screen.height)  
  console.log(screen.width); 
  console.log(screen.colorDepth);

location

location对象代表一个网页的地址信息

  • location.href:网页地址
  • location.protocol:访问协议
  • location.host:访问主机
  • location.port:访问端口号
  • location.pathname:访问路径
  • location.search:查询参数
  • location.hash:hash
复制代码
  location.href = www.example.com:8080/path/index.html?a=1&b=2#TOP
  location.protocol; // 'http'
  location.host; // 'www.example.com'
  location.port; // '8080'
  location.pathname; // '/path/index.html'
  location.search; // '?a=1&b=2'
  location.hash; // 'TOP'
复制代码

history

history对象保存了浏览器的历史记录。对于现代Web页面来说,由于大量使用AJAX和页面交互,使用history是不可取的。

  • history.back():后退
  • history.forward():前进
  • history.go():前进或后退几次
  //history对象
  history.back();  //前进
  history.forward();//后退
  history.go(-1);//后退一次

document

document对象代表一个页面,由于HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节点。

document常见属性:

  • document.title:文档标题,与HTML中的title标签等价
  • document.bgColor:页面背景颜色
  • document.fgColor:页面前景色
  • document.fileCreateDate:文件建立日期,只读属性
  • document.fileModifiedDate:文件修改日期,只读属性
  • document.URL:可返回当前文档的URL
  • document.linkColor:未点击过的链接颜色
  • doucment.alinkColor:鼠标在此链接上的颜色
  • document.vlinkColor:已点击过的链接颜色
  • document.charset:设置字符集,简体中文为gb2312
  • document.fileSize:文件大小,只读属性
  • document.cookies:设置和读出cookie

document常见方法:

  • document.createElement(tag):创建HTML元素
  • document.getElementById(id):获得指定id值的对象
  • document.getElementByName(name):获得name值的对象
  • document.write():动态向页面写内容
  • document.body.appendChild(ele):向节点添加最后一个子节点

document常用事件:

  • document.body.onclick="func()":鼠标指针单击页面时触发
  • document.body.onmouseover="func()":鼠标指针移到页面时触发
  • document.body.onmouseout="func()": //鼠标指针移出页面时触发

document对象应用详细介绍,请看后面章节。

文章同时发表在:码农编程网 欢迎访问

本节重点:

  • 浏览器介绍;
  • 什么是BOM,BOM常见对象介绍;
  • DOM对象介绍。

 

 

出处:https://www.cnblogs.com/qqxz/p/17540338.html

标签:浏览器,对象,JavaScript,JS,window,location,navigator,document
From: https://www.cnblogs.com/mq0036/p/17541174.html

相关文章

  • 大量创建对象的性能
    大量创建对象的性能注:试验中,均统一开启O3优化。试验均在同一系统上进行。背景在构建一种通用图片对象时,一种可能的实现是将每个像素作为一个对象处理。以2560*1440为例,约\(3.6\times10^6\)像素,因此在构建图片时,需要创建大量像素对象。本文讨论C++下创建大量对象的性能以及......
  • 函数对象
    函数对象定义定义了operator()的对象就是函数对象。函数的封装可以使用std::function对函数(指向函数的指针)、lambda表达式、bind表达式、函数对象、指向成员函数的指针、指向成员变量的指针;简单示例#include<functional>#include<iostream>intfun(inta){std::c......
  • js/ts文件中,导入i18n报错:Must be called at the top of a `setup` function
    import{useI18n}from'vue-i18n';const{t}=useI18n(); 会在非组件情况下报错: 此时我们需要将上述导入方式改为:importi18nfrom'@/lang/i18n';//@/lang/i18n为语言包位置const{t}=i18n.global;......
  • 西门子PID调节仿真程序,1200plc和1500plc通用,只需一个PLC实物,就能轻松实现PID工艺对象
    西门子PID调节仿真程序,1200plc和1500plc通用,只需一个PLC实物,就能轻松实现PID工艺对象的仿真,是学习PID的参数的好工具。针对这套程序,录制了一段视频解说,手把手教你如何使用博途PID调节工具和触摸屏PID画面的操作,非常值得拥有哦ID:7115632550149443......
  • Java实现浏览器端大文件分片上传插件
    ​ 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。首先我们需要了解的是上传文件三要素:1.表单提交方式:post(get方式提交有大小限制,post没有)2.表单的enctype属性:必须设置为multipart/form-data.3.表单必须......
  • js调用浏览器打印功能
    1.打印开始结束的信息2.点击打印按钮<buttontype="button"onclick="doPrint()">打印</button><script>functiondoPrint(){console.log(33333333333)bdhtml=window.document.body.innerHTML;sprnstr="<!--startprint--&......
  • js中的浏览器对象
    作为一种脚本语言,JavaScript代码不能独立运行,通常情况下我们需要借助浏览器来运行JavaScript代码,所有Web浏览器都支持JavaScript。除了可以在浏览器中执行外,也可以在服务端或者搭载了JavaScript引擎的设备中执行JavaScript代码,浏览器之所以能够运行JavaScript代码就......
  • 2023-07-10 记录使用chrome浏览器点击内容搜索时跳转到了一个叫www.ibaixia.com的网站
    前言:猜测是chrome中毒了,或者就是网页被劫持了,每次搜索会跳转到www.ibaixia.com,然后在一瞬间又跳转到了百度搜索页。解决方案:在chrome打开chrome://settings/searchEngines,也就是打开设置,找到【网站搜索】一栏,在该栏中找到百度字样,然后打开它,如果是正确的www.baidu.com,那就不用......
  • 基于three.js的3D展厅Demo功能设计与实现
    参考网址: http://www.webgl3d.cn/          https://www.three3d.cn/ 1、three.js之helloworld    功能:立方体在三维空间的转动。   代码位置:demo_0_scene    目的:理解场景/相机 /渲染器/坐标系/几何体/材质/物体......
  • vscode + nodesjs import 和 require 使用的两种case
    在环境nodejs+vscode的环境下,使用nodejs作为js的解释器, 在这种环境中直接使用export/import是无法正常工作的。 解决方式有两个:1.npminit-y胜场package.json修改内容增加: "type":"module",{"name":"javascript","version":"1.0.0&qu......