HTML BOM Browser对象

来源:http://www.chinese-glasses.com 作者:Web前端 人气:159 发布时间:2020-04-07
摘要:时间: 2019-10-11阅读: 135标签: 打印 BOM :Browser ObjectModel,即浏览器对象模型,提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。 我们知道,window.print()可以调起打印功能,但

时间: 2019-10-11阅读: 135标签: 打印

BOM:Browser Object Model,即浏览器对象模型,提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

我们知道,window.print()可以调起打印功能,但是直接用window.print()如果直接打印的话,没有样式,而且默认打印的是整个网页的内容。解决的方法可以用iframe方式引入需要打印的区域,并把样式添加进去,然后把iframe标签定位到看不到的地方去。搜了一下,已经有人造好了轮子,react-to-print插件就是这么做的。

Browser对象:指BOM提供的多个对象,包括:Window、Navigator、Screen、History、Location等。

一.使用方法

其中Window对象为顶层对象,其他对象都为Window对象的子对象。

下载

 

npm install --save react-to-print

目录

  1. Window 对象:表示浏览器打开的窗口,包括获取焦点、改变滚动条、设置定时器等等。

  2. Navigator 对象:包含浏览器信息。如:获取浏览器名称、版本信息、操作系统平台信息等等。

  3. Screen 对象:包含屏幕信息。如:获取屏幕高度、宽度等等。

  4. History 对象:可对当前页的浏览历史进行操作,如:前进、后退等。

  5. Location 对象:可对当前页面的URL进行操作,如:导航到新的页面、获取URL信息等。

 

引用

1. Window 对象

import ReactToPrint from 'react-to-print';

1.1 说明

Window 对象:表示浏览器打开的窗口、标签或者框架(若当前页面里包含多个iframe,会为每个iframe创建Window对象)。

Window对象不会被实例化,调用属性和方法都作为window的静态成员。

调用方式:调用Window对象的成员时,可以省略前面的window。如:window.alert() 可写成 alert() 。

 

调用

1.2 属性

图片 1 readonly ApplicationCache applicationCache :返回窗口的应用缓存对象。

图片 2 readonly boolean closed :返回窗口是否已经关闭。

图片 3 readonly Console console :返回对Consol对象的引用,对浏览器控制台进行操作。

图片 4 readonly int devicePixelRatio :返回设备像素比,即当前显示器的物理像素和设备独立像素(dip)的比例。

图片 5 readonly Document document :返回当前窗口的Document对象。

图片 6 readonly Element frameElement :若当前window处于一个<iframe>中,此属性返回这个IFrame。若在顶级窗口,返回null。

图片 7 readonly Window[] frames :返回一个包含窗口内所有的框架的数组。

图片 8 readonly History history :返回一个History对象。可对当前页的历史进行操作,如:前进、后退等。

图片 9 readonly long innerHeight :返回当前窗口可显示HTML文档的高度,单位px(像素)。

图片 10 readonly long innerWidth :返回当前窗口可显示HTML文档的宽度,单位px(像素)。

图片 11 readonly long length :返回窗口内包含框架的数量,即frames数量。

图片 12 readonly Location location :返回一个Location对象。可对当前页面的URL进行操作,如:导航到新的页面、获取URL信息等。

图片 13 readonly LocalStorage localStorage :返回一个键/值对存储的Storage对象,持续到被用户删除。

图片 14 string name :设置或获取当前窗口的name。

图片 15 readonly Navigator navigator :返回一个Navigator 对象。包含浏览器信息。如:获取浏览器名称、版本信息、操作系统平台信息等等。

图片 16 Window openner :返回对打开当前窗口的原窗口一个引用。若当前窗口是由另一个窗口打开的, window.opener保留对那个窗口的引用. 如果当前窗口不是由其他窗口打开的,则该属性返回 null。

图片 17 readonly long outerHeight :返回当前浏览器的总高度,单位px(像素)。包含工具栏、滚动条、浏览器边框等范围。

图片 18 readonly long outerWidth :返回当前浏览器的总宽度,单位px(像素)。包含工具栏、滚动条、浏览器边框等范围。

图片 19 readonly long pageXOffset :返回文档横向滚动的距离,单位px(像素)。

图片 20 readonly long pageYOffset :返回文档纵向滚动的距离,单位px(像素)。

图片 21 readonly Window parent :返回当前窗口的父级窗口。若当前窗口是顶级窗口,返回当前窗口本身。若当前窗口为一个框架窗口,返回它的父窗口。

图片 22 readonly Screen screen :返回一个Screen对象。包含屏幕信息。如:获取屏幕高度、宽度等等。

图片 23 readonly long screenX :返回浏览器在屏幕的X坐标。

图片 24 readonly long screenY :返回浏览器在屏幕的Y坐标。

图片 25 readonly long scrollX :返回文档横向滚动的距离,单位px(像素)。与pageXOffset属性一样。

图片 26 readonly long scrollY :返回文档纵向滚动的距离,单位px(像素)。与pageYOffset属性一样。

图片 27 readonly Window self :返回一个对当前Window对象的引用。

图片 28 readonly SessionStorage sessionStorage :返回一个键/值对存储的Storage对象,持续到当前浏览会话结束。

图片 29 readonly Window top :返回当前窗口的顶级窗口。若当前窗口本身已经是顶级,则返回自身。若当前窗口为一个框架窗口,返回包含它的顶级窗口(parent只是返回父窗口)。

图片 30 readonly Window window :返回当前窗口Window对象。

 

 //触发按钮 ReactToPrint trigger={() = a href="#"点此打印/a} content={() = this.componentRef} / //打印内容 div ref={el = (this.componentRef = el)} ....内容 div/

1.3 方法

图片 31 void addEventListener(string eventType,function eventListener) :给窗口注册事件。eventType事件类型,如:click。eventListener:事件触发的函数或对象。

图片 32 void alert(string msg) :弹出一个包含msg和一个确认按钮的警告框。

图片 33 string atob(string base64Str) :将一个基于Base64编码的字符串解码为一个字符串。

图片 34 void blur() :当前窗口移除焦点。

图片 35 string btoa(string str) :将一个字符串编码为一个Base64编码。

图片 36 void clearInterval(long intervalHandle) :停止intervalHandle指定的setInterval()。

图片 37 void clearTimeout(long timeoutHandle) :停止timeoutHandle指定的setTimeout()。

图片 38 void close() :关闭当前窗口。只能关闭由脚本打开的窗口,如:a元素打开新页面。

图片 39 boolean confirm(string msg) :显示带有一段消息以及确认按钮和取消按钮的对话框。点击确认按钮返回true,点击取消按钮返回false。

图片 40 void focus() :当前窗口获得焦点。

图片 41 void moveBy(long deltaX, long deltaY) :使open()方法创建的窗口,在本身的位置上,水平移动deltaX个像素,垂直移动deltaY个像素。

图片 42 void moveTo(long x, long y) :使open()方法创建的窗口,移动到x,y坐标。

图片 43 Window open(string url, string target, string features, string replace) :创建一个新的窗口。

图片 44图片 45

参数:
①url {string} :新窗口加载的url。若没有指定,将使用"about:blank"。
②target {string}  :新窗口的名称。若没有指定,将使用"_black"。注意此值并不是窗口标题。
③features {string} 可选 :表示新窗口的特性,如:窗口功能和工具栏 。 字符串中不能包含任何空白字符,特性之间用逗号分隔开。

返回值:
{Window} 返回新窗口的引用。

方法详情

图片 46 void print() :调用浏览器的打印按钮。

图片 47 string prompt(string msg) :弹出一个显示msg信息并包含一个确定按钮和取消按钮的输入框。此输入框会阻塞页面,点击确定按钮返回输入的内容,点击取消按钮返回null。

图片 48 void resizeBy(long deltaWidth, long deltaHeight) :使open()方法创建的窗口,在本身的位置上,宽度增加deltaWidth个像素,高度增加deltaHeight个像素。

图片 49 void resizeTo(long width, long height) :使open()方法创建的窗口,宽度变为width,高度变为height。

图片 50 void scrollBy(long deltaWidth, long deltaHeight) :在当前滚动的基础上,横向滚动deltaWidth像素,纵向滚动deltaHeight像素。

图片 51 void scrollTo(long width, long height) :横向滚动到width像素距离上,纵向滚动到height像素距离上。

图片 52 long setInterval(function fn, long time) :每隔一定的周期(毫秒)执行指定函数。

图片 53图片 54

参数:
①fn {function} :需要执行的函数。
②time {long} :设置每隔多少毫秒执行指定的函数。单位:毫秒。

返回值:
{long} 返回一个数字。可以通过调用window.clearInterval()来取消此函数的执行。

方法详情

图片 55 long setTimeout(function fn, long time) :在一定的毫秒数后执行指点函数。

图片 56图片 57

参数:
①fn {function} :需要执行的函数。
②time {long} :设置多少毫秒后执行指定的函数。单位:毫秒。

返回值:
{long} 返回一个数字。可以通过调用window.clearTimeout()来取消此函数的执行。

方法详情

 

二.组件参数ReactToPrint /

2.Navigator 对象

该组件接受以下参数(注意:?表示可选参数):

2.1 说明

Navigator 对象:包含浏览器信息。如:获取浏览器名称、版本信息、操作系统平台信息等等。

调用方式:window.navigator 或者 navigator。

 

名称

2.2 属性

图片 58 readonly string appName :返回浏览器的名称。基于 Netscape 的浏览器中,返回的是 "Netscape"。在 IE 中,返回值为 "Microsoft Internet Explorer"。

图片 59 readonly string appVersion :返回浏览器版本和平台信息。如:某个Chrome版本返回 "5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36"。

图片 60 readonly Geolocation geolocation :返回一个Geolocation对象,可获取当前的地理信息。

图片 61 readonly string language :返回浏览器界面语言。简体中文返回:"zh-CN"。

图片 62 readonly boolean onLine :返回浏览器是否可连接网络。

图片 63 readonly string platform :返回浏览器所在的系统平台。如:Win32。

图片 64 readonly string userAgent :返回由客户机发送服务器的 user-agent 头部的值。如:"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36".

图片 65 readonly ServiceWorker serviceWorker :返回ServiceWorker对象。serviceWorker运行于浏览器后台的一种脚本,它可以无需Web页面或者用户交互就能提供额外的功能。

 

本文由10bet发布于Web前端,转载请注明出处:HTML BOM Browser对象

关键词:

最火资讯