目录
[1. 获取文档显示区域的高度和宽度](#1. 获取文档显示区域的高度和宽度)
[2. 获取外部窗体的宽度和高度](#2. 获取外部窗体的宽度和高度)
[3. 打开一个新的窗口](#3. 打开一个新的窗口)
[BOM 的 Location 对象](#BOM 的 Location 对象)
[1. 刷新当前页面](#1. 刷新当前页面)
[2. 跳转到另一个页面](#2. 跳转到另一个页面)
[3. Location 的其他属性](#3. Location 的其他属性)
[1. 警告框](#1. 警告框)
[2. 确认框](#2. 确认框)
[3. 输入框](#3. 输入框)
[1. 只执行一次](#1. 只执行一次)
[2. 不停地重复执行](#2. 不停地重复执行)
[3. 终止重复执行](#3. 终止重复执行)
[4. 不要在setInterval调用的函数中使用document.write();](#4. 不要在setInterval调用的函数中使用document.write();)
前言
今天星途给大家带来JavaScript倒数第二部分知识:BOM编程,希望对码客们有帮助。学过的大佬可以收藏当笔记看。
1. 获取文档显示区域的高度和宽度
你可以使用window
对象的innerHeight
和innerWidth
属性来获取文档显示区域(即视口)的高度和宽度。
javascript
// 获取文档显示区域的高度
var viewportHeight = window.innerHeight;
// 获取文档显示区域的宽度
var viewportWidth = window.innerWidth;
console.log('Viewport Height:', viewportHeight);
console.log('Viewport Width:', viewportWidth);
2. 获取外部窗体的宽度和高度
"外部窗体"通常指的是整个浏览器窗口,包括工具栏、滚动条等。你可以使用window.outerWidth
和window.outerHeight
来获取这些值,但这些属性可能不被所有浏览器支持。更常用的是使用screen
对象的属性来获取屏幕的分辨率,但这并不是浏览器窗口的大小。
javascript
// 注意:这些属性可能不被所有浏览器支持
var outerWindowWidth = window.outerWidth;
var outerWindowHeight = window.outerHeight;
// 使用Screen对象获取屏幕分辨率
var screenWidth = screen.width;
var screenHeight = screen.height;
console.log('Outer Window Width (if supported):', outerWindowWidth);
console.log('Outer Window Height (if supported):', outerWindowHeight);
console.log('Screen Width:', screenWidth);
console.log('Screen Height:', screenHeight);
3. 打开一个新的窗口
你可以使用window.open()
方法来打开一个新的浏览器窗口或标签页。
javascript
// 打开一个新的窗口,并导航到指定的URL
var newWindow = window.open('https://www.example.com', '_blank');
// 注意:出于安全原因,浏览器可能会阻止或限制弹出窗口
关于"Navigator对象"
navigator
对象包含了有关浏览器的信息。
javascript
// 获取浏览器名称
var browserName = navigator.appName;
// 获取浏览器版本
var browserVersion = navigator.appVersion;
// 获取用户代理字符串(包含浏览器、操作系统等信息)
var userAgent = navigator.userAgent;
console.log('Browser Name:', browserName);
console.log('Browser Version:', browserVersion);
console.log('User Agent:', userAgent);
关于"Screen对象"
前面已经提到了screen
对象,它包含了关于客户端屏幕的信息。
关于"history"对象
history
对象允许你与浏览器的会话历史进行交互。但请注意,出于安全原因,你不能修改历史记录。
javascript
// 返回上一次访问的页面(等同于点击浏览器的后退按钮)
window.history.back();
// 返回上上次访问的页面(这通常不是直接支持的,但你可以连续调用两次back())
// window.history.go(-2); // 这将返回到历史记录中的前两个页面
// 前进到历史记录中的下一个页面(等同于点击浏览器的前进按钮)
window.history.forward();
// 加载历史记录中的特定页面(参数是相对于当前页面的索引,-1表示上一个页面,1表示下一个页面)
window.history.go(-1); // 这将返回到上一个页面
BOM 的 Location 对象
1. 刷新当前页面
你可以使用 location.reload()
方法来刷新当前页面。
javascript
location.reload(); // 刷新当前页面
2. 跳转到另一个页面
你可以使用 location.href
属性或者 location.assign()
方法来跳转到另一个页面。
javascript
// 使用 location.href
location.href = "https://www.example.com";
// 使用 location.assign()
location.assign("https://www.example.com");
3. Location 的其他属性
location.href
:获取或设置整个 URL。location.protocol
:获取 URL 的协议(如 "http:" 或 "https:")。location.hostname
:获取 URL 的主机名。location.port
:获取 URL 的端口号。location.pathname
:获取 URL 的路径名。location.search
:获取 URL 的查询字符串部分(问号后面的部分)。location.hash
:获取 URL 的锚部分(井号后面的部分)。
javascript
console.log(location.protocol); // 输出协议,如 "http:"
console.log(location.hostname); // 输出主机名
console.log(location.pathname); // 输出路径名
console.log(location.search); // 输出查询字符串,如 "?key=value"
console.log(location.hash); // 输出锚部分,如 "#section"
弹出框
1. 警告框
使用 alert()
函数来显示警告框。
javascript
alert("这是一个警告框!");
2. 确认框
使用 confirm()
函数来显示一个确认框,用户可以选择确定或取消。
javascript
var result = confirm("你确定要执行此操作吗?");
if (result) {
console.log("用户点击了确定");
} else {
console.log("用户点击了取消");
}
3. 输入框
使用 prompt()
函数来显示一个输入框,用户可以在其中输入文本。
javascript
var name = prompt("请输入你的名字:", "默认值"); // 第二个参数是默认值
if (name !== null) { // 用户可能直接点击了取消,这时返回null
console.log("你好," + name + "!");
}
计时器
1. 只执行一次
使用 setTimeout()
函数来设置一个只执行一次的计时器。
javascript
setTimeout(function() {
console.log("这是一个只执行一次的计时器!");
}, 2000); // 2秒后执行
2. 不停地重复执行
使用 setInterval()
函数来设置一个重复执行的计时器。
javascript
var intervalId = setInterval(function() {
console.log("这是一个重复执行的计时器!");
}, 1000); // 每1秒执行一次
3. 终止重复执行
使用 clearInterval()
函数来终止一个重复执行的计时器。
javascript
var intervalId = setInterval(function() {
console.log("这是一个重复执行的计时器!");
if (/* 某个条件 */) {
clearInterval(intervalId); // 当满足某个条件时终止计时器
}
}, 1000);
4. 不要在setInterval调用的函数中使用document.write();
当在HTML文档加载完成后(即DOM内容加载完成后)使用document.write()
方法时,它会导致整个文档内容被重写,而不是仅仅添加新内容。这是因为document.write()
实际上是在写入到文档的"流"中,而在文档加载完成后,这个"流"已经关闭,因此再次调用document.write()
会导致页面被重写。
错误的使用方式:
javascript
// 这会导致整个页面被重写,并且不断重复,直到浏览器崩溃或阻止它
setInterval(function() {
document.write("这是错误的使用方式!");
}, 1000);
正确的使用方式:
通常,当你想在页面上动态更新内容时,应该使用DOM操作。以下是一些常用的DOM操作方法:
innerHTML
:设置或获取HTML元素的内容(包括HTML标签)。textContent
:设置或获取HTML元素的文本内容(不包括HTML标签)。- DOM API(如
createElement
、appendChild
等):用于创建和修改DOM元素。
使用innerHTML
:
javascript
setInterval(function() {
var element = document.getElementById("myElement");
element.innerHTML = "<p>这是正确的使用方式,使用innerHTML!</p>";
}, 1000);
使用textContent
:
javascript
setInterval(function() {
var element = document.getElementById("myElement");
element.textContent = "这是正确的使用方式,使用textContent!";
}, 1000);
使用DOM API:
javascript
setInterval(function() {
var parentElement = document.getElementById("parentElement");
var newElement = document.createElement("p");
newElement.textContent = "这是正确的使用方式,使用DOM API!";
parentElement.appendChild(newElement);
// 注意:这里每次都会添加一个新的<p>元素,如果你只想更新内容而不是添加新元素,需要清除之前的元素
}, 1000);
注意事项
-
清除定时器 :如果你使用
setInterval()
设置了一个重复执行的定时器,并且想在某个时刻停止它,你应该保存定时器的ID,并使用clearInterval()
方法来清除它。javascriptvar intervalId = setInterval(function() { // ... 你的代码 ... }, 1000); // 在某个时刻清除定时器 clearInterval(intervalId);
-
性能考虑 :过度使用
setInterval()
可能会导致性能问题,特别是当定时器回调函数中执行的操作很耗时或频繁时。在这种情况下,你可能需要考虑使用requestAnimationFrame()
或setTimeout()
来代替,以实现更平滑的动画或更好的性能。 -
避免闭包导致的内存泄漏 :如果你在
setInterval()
的回调函数中使用了外部变量的闭包,而这些变量在函数外部不再被引用时,可能会导致内存泄漏。确保在不再需要定时器时清除它,并避免在回调函数中创建不必要的闭包。
结语
以上便是今天的"BOM编程"的全部内容,大家共同努力成为更好的程序员。
respect!