JavaScript第九讲：BOM编程

最新推荐文章于 2024-08-10 16:15:00 发布

星途码客

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量1.8k

点赞数 35

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript 前端

本文链接：https://blog.csdn.net/2303_80856850/article/details/139456054

版权

JavaScript 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

4. 不要在setInterval调用的函数中使用document.write();

注意事项

结语

前言

今天星途给大家带来JavaScript倒数第二部分知识：BOM编程，希望对码客们有帮助。学过的大佬可以收藏当笔记看。

1. 获取文档显示区域的高度和宽度

你可以使用window对象的innerHeight和innerWidth属性来获取文档显示区域（即视口）的高度和宽度。

// 获取文档显示区域的高度  
var viewportHeight = window.innerHeight;  
  
// 获取文档显示区域的宽度  
var viewportWidth = window.innerWidth;  
  
console.log('Viewport Height:', viewportHeight);  
console.log('Viewport Width:', viewportWidth);

2. 获取外部窗体的宽度和高度

“外部窗体”通常指的是整个浏览器窗口，包括工具栏、滚动条等。你可以使用window.outerWidth和window.outerHeight来获取这些值，但这些属性可能不被所有浏览器支持。更常用的是使用screen对象的属性来获取屏幕的分辨率，但这并不是浏览器窗口的大小。

// 注意：这些属性可能不被所有浏览器支持  
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()方法来打开一个新的浏览器窗口或标签页。

// 打开一个新的窗口，并导航到指定的URL  
var newWindow = window.open('https://www.example.com', '_blank');  
  
// 注意：出于安全原因，浏览器可能会阻止或限制弹出窗口

关于“Navigator对象”

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

// 获取浏览器名称  
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对象允许你与浏览器的会话历史进行交互。但请注意，出于安全原因，你不能修改历史记录。

// 返回上一次访问的页面（等同于点击浏览器的后退按钮）  
window.history.back();  
  
// 返回上上次访问的页面（这通常不是直接支持的，但你可以连续调用两次back()）  
// window.history.go(-2); // 这将返回到历史记录中的前两个页面  
  
// 前进到历史记录中的下一个页面（等同于点击浏览器的前进按钮）  
window.history.forward();  
  
// 加载历史记录中的特定页面（参数是相对于当前页面的索引，-1表示上一个页面，1表示下一个页面）  
window.history.go(-1); // 这将返回到上一个页面

BOM 的 Location 对象

1. 刷新当前页面

你可以使用 location.reload() 方法来刷新当前页面。

location.reload(); // 刷新当前页面

2. 跳转到另一个页面

你可以使用 location.href 属性或者 location.assign() 方法来跳转到另一个页面。

// 使用 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 的锚部分（井号后面的部分）。

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() 函数来显示警告框。

alert("这是一个警告框！");

2. 确认框

使用 confirm() 函数来显示一个确认框，用户可以选择确定或取消。

var result = confirm("你确定要执行此操作吗？");  
if (result) {  
    console.log("用户点击了确定");  
} else {  
    console.log("用户点击了取消");  
}

3. 输入框

使用 prompt() 函数来显示一个输入框，用户可以在其中输入文本。

var name = prompt("请输入你的名字：", "默认值"); // 第二个参数是默认值  
if (name !== null) { // 用户可能直接点击了取消，这时返回null  
    console.log("你好，" + name + "！");  
}

计时器

1. 只执行一次

使用 setTimeout() 函数来设置一个只执行一次的计时器。

setTimeout(function() {  
    console.log("这是一个只执行一次的计时器！");  
}, 2000); // 2秒后执行

2. 不停地重复执行

使用 setInterval() 函数来设置一个重复执行的计时器。

var intervalId = setInterval(function() {  
    console.log("这是一个重复执行的计时器！");  
}, 1000); // 每1秒执行一次

3. 终止重复执行

使用 clearInterval() 函数来终止一个重复执行的计时器。

var intervalId = setInterval(function() {  
    console.log("这是一个重复执行的计时器！");  
    if (/* 某个条件 */) {  
        clearInterval(intervalId); // 当满足某个条件时终止计时器  
    }  
}, 1000);

4. 不要在setInterval调用的函数中使用document.write();

当在HTML文档加载完成后（即DOM内容加载完成后）使用document.write()方法时，它会导致整个文档内容被重写，而不是仅仅添加新内容。这是因为document.write()实际上是在写入到文档的“流”中，而在文档加载完成后，这个“流”已经关闭，因此再次调用document.write()会导致页面被重写。

错误的使用方式：

// 这会导致整个页面被重写，并且不断重复，直到浏览器崩溃或阻止它  
setInterval(function() {  
    document.write("这是错误的使用方式！");  
}, 1000);

正确的使用方式：

通常，当你想在页面上动态更新内容时，应该使用DOM操作。以下是一些常用的DOM操作方法：

innerHTML：设置或获取HTML元素的内容（包括HTML标签）。
textContent：设置或获取HTML元素的文本内容（不包括HTML标签）。
DOM API（如createElement、appendChild等）：用于创建和修改DOM元素。

使用innerHTML：

setInterval(function() {  
    var element = document.getElementById("myElement");  
    element.innerHTML = "<p>这是正确的使用方式，使用innerHTML！</p>";  
}, 1000);

使用textContent：

setInterval(function() {  
    var element = document.getElementById("myElement");  
    element.textContent = "这是正确的使用方式，使用textContent！";  
}, 1000);

使用DOM API：

setInterval(function() {  
    var parentElement = document.getElementById("parentElement");  
    var newElement = document.createElement("p");  
    newElement.textContent = "这是正确的使用方式，使用DOM API！";  
    parentElement.appendChild(newElement);  
    // 注意：这里每次都会添加一个新的<p>元素，如果你只想更新内容而不是添加新元素，需要清除之前的元素  
}, 1000);

注意事项

清除定时器：如果你使用setInterval()设置了一个重复执行的定时器，并且想在某个时刻停止它，你应该保存定时器的ID，并使用clearInterval()方法来清除它。
```
var intervalId = setInterval(function() {  
    // ... 你的代码 ...  
}, 1000);  
  
// 在某个时刻清除定时器  
clearInterval(intervalId);
```
性能考虑：过度使用setInterval()可能会导致性能问题，特别是当定时器回调函数中执行的操作很耗时或频繁时。在这种情况下，你可能需要考虑使用requestAnimationFrame()或setTimeout()来代替，以实现更平滑的动画或更好的性能。
避免闭包导致的内存泄漏：如果你在setInterval()的回调函数中使用了外部变量的闭包，而这些变量在函数外部不再被引用时，可能会导致内存泄漏。确保在不再需要定时器时清除它，并避免在回调函数中创建不必要的闭包。