SentralLiu

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
  • 浏览器对象模型 (BOM-Browser Object Model) 使 JavaScript 有能力与浏览器"对话"。

  • 由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。

4.1 window    浏览器中主要通过window对象来操作js的代码
     js中所有内容都属于window,通过window可以调任意内容,包括document,console等对象 

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

  • 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

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

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

  • 甚至 HTML DOM 的 document 也是 window 对象的属性之一:

  • window的尺寸

    • 浏览器窗口内部的宽度和高度

      • window.innerWidth - 浏览器窗口的内部宽度,随着窗口变化而变化

      • window.innerHeight - 浏览器窗口内部高度,随着窗口变化而变化

    • body内容的宽度和高度

      • document.body.clientWidth

  • document.body.clientHeight

  • Window Screen

    • 屏幕宽度:screen.availWidth 属性返回访问者屏幕的宽度,固定的屏幕宽度

    • 屏幕高度:screen.availHeight 属性返回访问者屏幕的高度,固定的屏幕高度

document.write("屏幕宽度: " + screen.availWidth);
document.write("屏幕高度: " + screen.availHeight);
  • Window Location

    • window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

    • window.location 对象在编写时可不使用 window 这个前缀。 一些例子:

      • location.hostname 返回 web 主机的域名

      • location.pathname 返回当前页面的路径和文件名

      • location.port 返回 web 主机的端口 (80 或 443)

      • location.protocol 返回所使用的 web 协议(http:// 或 https://)

      • location.href 属性返回当前页面的 URL

      • location.assign() 方法加载新的文档

function newDoc()
  {
  window.location.assign("http://www.baidu.com/")
  }
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
  • Window History

    • window.history 对象包含浏览器的历史。

    • window.history 对象在编写时可不使用 window 这个前缀。

      • history.back()

      • history.forward()

    • 一些方法示例如下:

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击按钮向前相同

	<body>
		<!-- history:用于前进,后退,与刷新操作;与浏览器的控件对应 -->
		<a href="04_history_2.html">进入最美页面</a><br />
		<input type="button" value="后退" onclick="history.back()" />
		<input type="button" value="前进" onclick="window.history.forward()" />
		<input type="button" value="刷新" onclick="location.reload()"/>
	</body>

 

	<body>
		<a href="04_history_1.html">我就是最美页面</a><br />
		<input type="button" value="后退2" onclick="history.go(-1)"/>
		<input type="button" value="前进2" onclick="history.go(1)"/>
		<input type="button" value="刷新2" onclick="history.go(0)"/>
	</body>
  • Window Navigator

    • window.navigator 对象在编写时可不使用 window 这个前缀。

<div id="example"></div>
		<script>
			var txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
			txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
			txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
			txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
			txt+= "<p>硬件平台: " + navigator.platform + "</p>";
			txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
			txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
			document.getElementById("example").innerHTML=txt;
		</script> 

posted on 2021-11-26 20:41  SentralLiu  阅读(28)  评论(0)    收藏  举报