JS Javascript与BOM的互动寻路

Posted 2020-09-09 K.Takanashi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS Javascript与BOM的互动寻路相关的知识，希望对你有一定的参考价值。

JS BOM

　　之前提到过JS和DOM之间的互动方法。而BOM（Browser Object Module）是浏览器的对象模型，它也可以和JS进行互动。也就是说，JS还可以和浏览器进行互动。因为现代主流浏览器都已经实现了JS中和BOM相关的方法，所以JS对BOM也有很高的通用性和兼容性。下面将通过几种每个浏览器都有的，通用的对象来讲述JS和BOM之间的互动方式

■　　window对象

　　window对象抽象的是浏览器的窗口,即用户的视口。DOM中常用的文档的抽象document对象也是window对象的一个属性：window.document

　　属性：

　　　　window.innerHeight　　浏览器内部窗口高度

　　　　window.innerWidth　　浏览器内部窗口宽度

　　方法：

　　　　window.open()　　打开窗口

　　　　window.close()　　关闭窗口

　　　　window.moveTo(x,y)　　移动窗口到

　　　　window.resizeTo(x,y)　　改变窗口大小

■　　window.screen对象

　　window.screen对象抽象的是用户的屏幕，在编程的时候可以省略window直接写screen構わない。

　　属性:

　　　　screen.availHeight　　用户屏幕高度

　　　　screen.availWidth　　用户屏幕宽度

　　　　*这两个和window的那俩尺寸属性不太一样，比如浏览器窗口没最大化，或者一个页面里面有多个iframe（每个也算一个独立的窗口）时，窗口尺寸会变小，但是屏幕尺寸是不变的。

■　　window.location对象

　　window.location对象抽象的是页面的URL。和screen一样，写的时候可以不要window做前缀

　　属性：

　　　　location.href　　当前页面的完整URL

　　　　location.hostname　　web主机的域名

　　　　location.pathname　　当前页面路径或文件名

　　　　location.port　　当前连接的端口

　　　　location.protocol　　当前连接的协议

　　方法：

　　　　location.assign(new_url)　　让当前窗口重新加载一个新的页面

■　　window.history对象

　　history对象维护了用户的历史操作信息，和上面的一样可以省去window前缀

　　方法：

　　　　history.back()　　相当于浏览器的后退

　　　　history.forward()　　相当于浏览器的前进

■　　window.navigator对象

　　navigator对象维护的是本次请求中浏览器的信息，也可以去掉window前缀

　　直接看个实例吧：

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerhtml=txt;

　　得到的结果是：

Browser CodeName: Mozilla

Browser Name: Netscape

Browser Version: 5.0 (Windows)

Cookies Enabled: true

Platform: Win32

User-agent header: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0

User-agent language: undefined

■　　消息框对象

　　JS调用消息框对象时大多数时候是调用了其构造方法来跳出一个消息框。消息框大概有以下几种：　　

　　alert(message)　　提示框

　　confirm(message)　　确认框，用户点确定返回true，取消返回false

　　prompt(message,defaultvalue)　　提升输入框，用户输入后点击确认返回输入值，点击取消返回默认值，如果默认值未设置则返回null

■　　计时对象

　　JS可以调用以下两个方法来设置/取消计时，设置计时相当于是设置让某些动作在固定时间后发生

　　setTimeout("some_javascript",milisecond)　　注意两点，1.计时的单位是毫秒 2.第一个参数不是函数或者其他什么对象，而是字符串。也就是说，必须传字符串进去，然后JS会对这个字符串进行解析然后执行。setTimeout方法会返回一个计时对象。

　　clearTimeout(timeout_object)　　参数是一个计时对象，用来取消这个计时对象定下的计时任务。

　　来综合看一个示例,这个实例按下start count按钮后每隔一秒增加一个count，无限循环直到按下stop count按钮

<html>

<head>
<script type="text/javascript">
var c=0
var t

function timedCount()
 {
 document.getElementById(‘txt‘).value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }

function stopCount()
 {
 clearTimeout(t)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>

</html>

以上是关于JS Javascript与BOM的互动寻路的主要内容，如果未能解决你的问题，请参考以下文章

原生JavaScript第五篇

JavaScript基础

JavaScript —— BOM

JavaScript ---[浏览器对象BOM]

JavaScript入门（基础）

前端知识-JavaScript

JS Javascript与BOM的互动 寻路

JS Javascript与BOM的互动寻路