浏览器对象模型及简单用法

最新推荐文章于 2024-07-11 21:34:43 发布

Yuki0529

最新推荐文章于 2024-07-11 21:34:43 发布

阅读量614

点赞数 8

分类专栏： JavaScript学习笔记文章标签： java intellij-idea javascript

本文链接：https://blog.csdn.net/Yuki0529/article/details/139238096

版权

JavaScript学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

浏览器对象模型

Navigator对象
Window对象
Frame对象
Location对象
History对象
Document对象
Form对象
Anchor对象

Navigator对象

navigator.appName：返回浏览器的名称。但请注意，这个属性在现代浏览器中通常返回 “Netscape”，因为它起源于早期的Netscape Navigator浏览器。
navigator.appVersion：返回浏览器的版本信息。这通常是一个字符串，包含了浏览器名称、版本、渲染引擎等详细信息。
navigator.userAgent：返回用户代理头的字符串表示（即通常所说的 “user agent string”）。这个字符串包含了关于浏览器、操作系统、设备等的详细信息，通常用于服务器端的内容协商（content negotiation）。
navigator.platform：返回运行浏览器的操作系统或硬件平台。这个值通常是 “Win32”、“MacIntel”、“Linux x86_64” 等。
navigator.language：返回浏览器的首选语言。这通常是一个字符串，如 “en-US” 表示美国英语。
navigator.cookieEnabled：返回一个布尔值，表示浏览器是否启用cookie。
navigator.onLine：返回一个布尔值，表示浏览器是否在线。请注意，这只是一个简单的检查，可能并不完全准确。
navigator.geolocation：返回一个 Geolocation 对象，用于访问设备的地理位置信息。
navigator.connection（部分浏览器支持）：返回一个 NetworkInformation 对象，提供了关于设备的网络连接信息，如带宽、连接类型等。

navigator.javaEnabled()：返回一个布尔值，表示浏览器是否启用Java。但请注意，由于安全和性能问题，现代浏览器通常不再支持Java插件。
navigator.vibrate(pattern)（部分浏览器支持）：使设备振动。pattern 是一个数组，表示振动的模式（如 [200, 100, 200] 表示振动200毫秒，停止100毫秒，再振动200毫秒）。
navigator.sendBeacon(url, data)（部分浏览器支持）：异步地向服务器发送数据，通常用于发送分析数据或报告。这个方法在文档卸载时仍然可以工作，并且不会阻塞页面的卸载。

	console.log(navigator.appName); // 输出 "Netscape"（尽管你可能使用的是Chrome、Firefox等）  

	console.log(navigator.userAgent); // 输出浏览器的用户代理字符串  

	console.log(navigator.language); // 输出浏览器的首选语言，如 "en-US"  

	  

	if (navigator.onLine) {  

	  console.log('您在线');  

	} else {  

	  console.log('您离线');  

	}  

	  

	// 使用 geolocation API 获取当前位置（需要用户同意）  

	if ("geolocation" in navigator) {  

	  navigator.geolocation.getCurrentPosition(function(position) {  

	    console.log('纬度: ' + position.coords.latitude);  

	    console.log('经度: ' + position.coords.longitude);  

	  }, function(error) {  

	    console.error('无法获取位置信息: ' + error.message);  

	  });  

	} else {  

	  console.log('Geolocation is not supported by this browser.');  

	}

Window 对象

Window属性

1. ``window.location

`window.location` 对象包含了关于当前 URL 的信息，以及一个可以用来导航到新的 URL 的方法。

	console.log(window.location.href); // 输出当前页面的完整 URL  
	window.location.href = "https://example.com"; // 导航到新的 URL

2. `window.document`

`window.document` 属性返回对当前文档的引用，它是一个 `Document` 对象，包含了关于页面的各种信息。

	console.log(window.document.title); // 输出当前页面的标题|

3. `window.innerHeight`和`window.innerWidth`

这两个属性分别返回浏览器窗口的视口（viewport）高度和宽度，以像素为单位。

	console.log(window.innerHeight); // 输出浏览器窗口的高度  
	console.log(window.innerWidth); // 输出浏览器窗口的宽度

4. `window.scrollX` 和 `window.scrollY`

这两个属性返回文档在水平和垂直方向已滚动的像素值。

	console.log(window.scrollX); // 输出水平滚动距离
	console.log(window.scrollY); // 输出垂直滚动距离

注意：在某些浏览器中，window.scrollX 和 window.scrollY 可能是 window.pageXOffset 和 window.pageYOffset 的别名。

5. `window.navigator`

`window.navigator` 对象包含了有关浏览器的信息。

	javascript复制代码console.log(window.navigator.userAgent); // 输出用户代理字符串，可以用来识别浏览器类型和版本

6. `window.name`

`window.name` 属性可以设置或返回窗口的名称。这通常用于 `window.open()` 方法中打开的新窗 口。

	console.log(window.name); // 输出当前窗口的名称| ||window.name = "myWindow"; // 设置当前窗口的名称

7. `window.status`

`window.status` 属性可以设置或返回窗口状态栏中的文本。但需要注意的是，由于用户体验和安全性考虑，现代浏览器可能不再显示状态栏文本。

	javascript复制代码window.status = "Loading..."; // 尝试设置状态栏文本，但可能不会显示

8. `window.history`

`window.history` 对象提供了与浏览器历史记录相关的功能，比如导航到前一个或后一个页面。

	window.history.back(); // 导航到历史记录中的前一个页面
	window.history.forward(); // 导航到历史记录中的后一个页面

9. `window.screen`

`window.screen` 对象包含了关于客户端屏幕的信息。

	console.log(window.screen.width); // 输出屏幕的宽度
	console.log(window.screen.height); // 输出屏幕的高度|

10. `window.outerHeight` 和 `window.outerWidth`

这两个属性返回浏览器窗口的整个高度和宽度，包括工具栏和滚动条（如果可见）。

	console.log(window.outerHeight); // 输出浏览器窗口的整个高度
	console.log(window.outerWidth); // 输出浏览器窗口的整个宽度|

Window方法

1.alert(message)

显示一个带有指定消息和“确定”按钮的警告框。

	alert("Hello, World!"); // 显示一个警告框，内容为"Hello, World!"

2.confirm(message)

显示一个带有指定消息以及“确定”和“取消”按钮的对话框。返回用户点击的按钮，如果用户点击“确定”，则返回 true；否则返回 false。

	var userChoice = confirm("Are you sure you want to proceed?");  
	if (userChoice) {  
	    alert("User clicked OK!");  
	} else {  
	    alert("User clicked Cancel!");  
	}

3.open(URL,NAME,[features[,replace]])

打开一个新的浏览器窗口或查找一个已命名的窗口。返回对新窗口的引用，如果没有创建新窗口则返回 null。

	var newWindow = window.open("https://example.com", "_blank", "width=800,height=600");  
	if (newWindow) {  
	    newWindow.focus(); // 将焦点设置到新打开的窗口  
	} else {  
	    alert("Popup blocked!");  
	}

4.prompt(message,default)

显示一个对话框，提示用户输入一行文本。对话框包含两个按钮：“确定”和“取消”，以及一个文本输入框。返回用户输入的文本或 null（如果用户点击了“取消”或关闭了对话框）。

	var userName = prompt("Please enter your name:", "Anonymous");  
	ic
  let timeoutid = setTimeout(UpDateTime,1000); 
  /*let timeoutid = setTimeout(function (){  
	  UpDateTime();  
	},1000);
	这样也可以
*/ 
    
}

7.setInterval( func | code.[ delay [ , arg1 [ , arg2 [ , … ]]]])

定期执行函数或代码，每次间隔指定的毫秒数。返回表示定时器的ID，该ID可用于稍后清除定时器。


	var counter = 0;  

	var intervalId = setInterval(function() {  

	    counter++;  

	    console.log(counter);  

	    if (counter >= 5) {  

	        clearInterval(intervalId); // 当计数器达到5时停止定时器  

	    }  

	}, 1000); // 每秒执行一次函数

8.clearTimeout(id) & clearInterval(id)

取消设置的定时器


	var timerId = setTimeout(function() {  

	    alert("This message will not be displayed!");  

	}, 2000);  

	  

	// 在定时器触发之前清除它  

	clearTimeout(timerId);

	//Tips:
	//- 当使用 `setInterval()` 时，如果前一个函数执行时间很长，可能会导致函数重叠执行（即在前一个函数完成之前，下一个函数已经开始执行）。这通常不是预期的行为。为了避免这种情况，可以在函数内部使用 `setTimeout()` 来设置下一次的执行时间，而不是使用 `setInterval()`。
/*`setTimeout()` 通常用于在一段时间后执行某个操作，例如延迟加载内容、实现动画效果等。
`setInterval()` 通常用于定期执行某个操作，例如轮播图、实时更新数据等。但是，由于前面提到的精确度问题，对于需要精确控制执行时间的场景（如音乐播放器、计时器等），可能需要使用其他方法（如 `requestAnimationFrame`、`Web Workers` 等）来实现。*/

9.scrollTo(x-coord,y-coord)

	window.scrollTo(0, 1000); // 滚动到页面垂直位置1000px处

10.focus() & blur()

尝试将浏览器窗口或框架置于最前并设置焦点。
尝试从浏览器窗口或框架移除焦点。


	// 通常用于表单元素，但window对象也支持这些方法  

	// window.focus(); // 将焦点设置到窗口（可能不总是有效）  

	// window.blur(); // 移除窗口的焦点（可能不总是有效）  

	  

	// 一个更常见的用法是在表单元素上  

	var inputElement = document.getElementById("myInput");  

	inputElement.focus(); // 将焦点设置到输入框

11.print()

	window.print(); // 调用浏览器的打印当前页面

Document对象

方法

1.write() & writeln() 方法

write() 方法用于向 HTML 输出流写内容。它通常用于在 <script> 标签中，在文档加载时动态地写入 HTML 内容。
writeln() 方法与 write() 方法类似，但它在写入的文本末尾添加一个换行符（<br> 或 \n，具体取决于上下文）。

	<!DOCTYPE html>  
	<html>  
	<body>  
	  
	<h2>JavaScript write() 方法</h2>  
	  
	<script>  
	document.write("<p>这是一个段落。</p>"); 
	document.writeln("<p>这是另一个段落。</p>");   
	</script>  
	  
	</body>  
	</html>

2.open()方法

open()方法打开一个已存在的文件或创建一个新文件来写入内容，允许文件类型包括：text/html 、text/plain、image/gif、image/jpeg、image/xbm等。

	<!DOCTYPE html>  
	<html>  
	<body>  
	  
	<h2>JavaScript open() 方法</h2>  
	  
	<script>  
	document.open();  
	document.write("<h1>新文档的标题</h1>");  
	document.close();  
	</script>  
	  
	</body>  
	</html>