BOM(Browser Object Model)编程是指通过JavaScript操作浏览器对象模型的方法来实现网页交互和动态效果。BOM编程主要涉及window对象和location对象的方法和属性。
1. Window对象
Window对象代表一个浏览器窗口或一个框架,提供了大量的方法和属性来操作窗口及其内容。以下是一些常用的Window对象方法和属性:
常用的方法:
open():打开一个新的浏览器窗口或标签页。
```javascript
window.open('https://www.example.com', '_blank');
```
close():关闭当前浏览器窗口。
```javascript
window.close();
```
resizeBy(width, height):相对当前窗口大小调整窗口尺寸。
```javascript
window.resizeBy(200, 100);
```
resizeTo(width, height):将窗口大小设置为指定的宽度和高度。
```javascript
window.resizeTo(800, 600);
```
moveTo(x, y):将窗口左上角移动到屏幕上的指定位置。
```javascript
window.moveTo(100, 100);
```
moveBy(x, y):从当前位置移动窗口。
```javascript
window.moveBy(50, 50);
```
setInterval(function, delay):每隔指定毫秒数执行一次指定的函数。
```javascript
var intervalId = setInterval(function() {
console.log('Interval running');
}, 1000);
```
setTimeout(function, delay):在指定毫秒数后执行一次指定的函数。
```javascript
var timeoutId = setTimeout(function() {
console.log('Timeout executed');
}, 3000);
```
clearInterval(intervalId):取消由setInterval设置的定时器。
```javascript
clearInterval(intervalId);
```
clearTimeout(timeoutId):取消由setTimeout设置的定时器。
```javascript
clearTimeout(timeoutId);
```
alert(message):显示一个提示框。
```javascript
alert('Hello, World!');
```
confirm(message):显示一个确认提示框。
```javascript
var result = confirm('Are you sure?');
```
prompt(message, defaultText):显示一个输入提示框。
```javascript
var input = prompt('Enter your name:', 'Guest');
```
2. Location对象
Location对象表示当前窗口的URL信息,并提供了操作URL的方法。以下是一些常用的Location对象方法和属性:
常用的方法:
href:获取或设置当前窗口的完整URL。
```javascript
console.log(window.location.href); // 输出当前URL
window.location.href = 'https://www.example.com'; // 跳转到新URL
```
protocol:获取或设置URL的协议部分(如http或https)。
```javascript
console.log(window.location.protocol); // 输出协议部分
```
hostname:获取或设置URL的主机名部分。
```javascript
console.log(window.location.hostname); // 输出主机名
```
port:获取或设置URL的端口号部分。
```javascript
console.log(window.location.port); // 输出端口号
```
pathname:获取或设置URL的路径名部分。
```javascript
console.log(window.location.pathname); // 输出路径名
```
search:获取或设置URL的查询字符串部分。
```javascript
console.log(window.location.search); // 输出查询字符串
```
hash:获取或设置URL的片段标识符部分。
```javascript
console.log(window.location.hash); // 输出片段标识符
```
assign(URL):加载并显示指定的URL。
```javascript
window.location.assign('https://www.example.com');
```
3. History对象
History对象包含用户访问过的URL信息,并提供了操作历史记录的方法。以下是一些常用的History对象方法:
常用的方法: