Bom对象-CSDN博客

本文链接：https://blog.csdn.net/2201_75694264/article/details/142531592

顶层对象window

全局创建的变量是window的属性，全局创建的函数是window的方法

子对象	作用
document	文档对象用于操作页面元素
location	地址对象用于操作URL地址
navigator	浏览器对象用于获取浏览器版本信息
history	历史对象用于操作浏览器历史
screen	屏幕对象用于操作屏幕的高度和宽度

属性

属性名	说明
closed	返回一个布尔值，用于判断窗口是否已经关闭。

window对象的所有子对象都是window对象的属性

所有的全局变量也都是 window 对象的属性

方法

窗口控制

方法名	说明
open([url],[_blank],[width	height
close()	关闭当前页面
moveTo(x,y)	移动窗口到指定坐标
moveBy(x,y)	相对当前位置移动
resizeTo(x,y)	窗口大小调整到指定宽高
resizeBy(+w,+h)(可以是正、负数值)	窗口大小增减宽高


<input type="button" value="打开窗口" name="" id="" onclick="openWin()">
<input type="button" value="关闭窗口" name="" id="" onclick="closeWin()">
<input type="button" value="判断窗口" name="" id="" onclick="panduanWin()">
<input type="button" value="移动窗口" name="" id="" onclick="moveWin()">
<input type="button" value="调整窗口大小" name="" id="" onclick="resizeWin()">
<script>
  function openWin(){
        // myWindow = window.open('http://www.baidu.com','',"width=500,height=500,top=100,left=100");
        // window.open('','',"width=200,height=200");
        // window.open('','',"width=500,height=500,top=100,left=100");
        myWindow = window.open('','',"width=500,height=500,top=200,left=200");
        myWindow.document.write('hello world');
  }
    function closeWin(){
        // 注意: 接收一个打开的窗口的名字
        myWindow.close();

    }
    function panduanWin(){
        // 能够判断窗口的状态是关闭的还是打开的
        // false=没有关闭  true=关闭
        console.log(myWindow.closed);
    }
    function moveWin(){
        // moveTo(x,y) x,y 只能为正值
        // moveBy(100,-100) 当前坐标的基础 + 100,-100
        myWindow.moveBy(-100,100);
    }
    function resizeWin(){
        // resizeTo(x,y) x,y 只能为正值
        // resizeBy(100,-100) 当前坐标的基础 + 100,-100
        // myWindow.resizeTo(100,100);
        myWindow.resizeBy(-100,-100);
    }
</script>

弹窗方法

方法名	说明
alert("信息内容")	弹出一个警告框
confirm("信息内容")	弹出一个确认对话框
prompt("信息内容",["默认输入内容"])	弹出一个提示对话框

如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

定时器

方法名	说明
setInterval("javascript语句",毫秒)	周期性执行计时器（执行多次）
clearInterval(计时器)	取消计时器
setTimeout("javascript语句",毫秒)	定时执行计时器(只执行一次)
clearTimeout(计时器)	取消计时器

location对象

location 对象用于获得当前页面的地址 (URL)，或把浏览器重定向到新的页面

window.location="https://www.baidu.com/"

属性名	说明
pathname	返回当前页面的路径和文件名。
href	返回当前页面的 URL
hostname	返回域名
port	返回端口
protocol	返回协议
search	返回传值部分

修改href的值

location.href="https://www.baidu.com/"

console.log(window.location.pathname);  // 返回文件名和路径地址
// console.log(location.pathname); // 可以省略window
console.log(location.href);  // 返回当前页面的url路径
console.log(location.hostname); // 返回域名 127.0.0.1
console.log(location.port); // 返回端口号 5500
console.log(location.protocol); // 返回协议 http
console.log(location.search); // 返回参数值

方法

方法名	说明
reload([true])	刷新
replace("url")	跳转到新页面

location.replace("https://www.qtummatrix.com/") // 替换当前路径
window.location  ='' // 跳转到对应的页面
window.location.href = '' // 跳转到对应的页面
window.open('url')

history对象

属性名：length 浏览器窗口的历史记录中的网页个数

方法

方法名	说明
go(num)	该方法可以直接跳转到某一个已经访问过的URL。
forward()	该方法可以前进到下一个访问过的URL,等价于go(1)
back()	该方法可以返回到上一个访问过的URL,等价于go(-1)

back()表示返回到上一页面，效果相当于go(-1);

forward()表示返回到下一页面，效果相当于go(1);

go()用于指定页的跳转，比如go(-2)表示返回到浏览过的前两个页面

思考： history.go(0)是什么效果

go(0)表示刷新（F5）

encodeURIComponent() 函数

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。其他字符（比如：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

var uri="http://w3cschool.cc/my test.php?name=ståle&car=saab"; document.write(encodeURIComponent(uri)); // 结果：http%3A%2F%2Fw3cschool.cc%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab