学习打卡 JavaScript BOM

最新推荐文章于 2024-10-30 19:10:39 发布

巴茹真者囧侠客

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量282

点赞数

分类专栏： JS学习打卡文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44990584/article/details/106237577

版权

JS学习打卡专栏收录该内容

12 篇文章 0 订阅

订阅专栏

对JS的BOM对象做个复习整理

（一）BOM_系统对话框

浏览器可以通过调用系统的对话框，向用户显示信息；
系统提供了三个函数，可以完成系统对话框的操作；

（1）alert()

        【功能】直接弹出警告框
        【参数】：警告框中显示的内容
        反正我是使用超级频繁，仅次于console.log，真就测试代码工具人本人呗…

（2）confirm()

【功能】弹出一个带有确定/取消按钮的警告框
【返回值】如果点击确定，返回true；如果点击取消，返回false

（3）prompt()

        【功能】弹出一个带输入的提示框
        【参数】第一个参数：要在提示框上显示的内容；第二个参数：输入框内默认的值；
        【返回值】如果点击确定：返回值是输入的内容；如果点击取消，返回值是null

（二）BOM_open方法

window.open()
【参数】 1 要加载的URL ； 2 窗口的名称或者窗口的目标； 3 一串具有特殊意义的字符串`

	window.onload = function(){
		var btn = document.getElementById('btn');
		btn.onclick = function(){
			open("http://www.baidu.com");	
			//【注】如果只有第一个参数，调用open方法就会打开新窗口，加载url
		}
	}

点击按钮时，直接跳转到百度界面，且多次点击后，会产生多个窗口；

	window.onload = function(){
		var btn = document.getElementById('btn');
		btn.onclick = function(){
			open("http://www.baidu.com","百度");
			//【注】第二个参数，给打开的新窗口起一个名字，以后再去加载url，就在这个已经起好名字的目标窗口加载url
		}
	}

多次点击时，仍然只会在原先窗口上进行加载；

	window.onload = function(){
		var btn = document.getElementById('btn');
		btn.onclick = function(){
			open("http://www.baidu.com","百度","width=400,height=400,top=200,left=200");
			//【注】第三个参数，设置当前打开窗口的各个属性值
		}
	}

本例中会打开一个小小的（可爱）窗口；

        【*】若将调用open方法的页面视作父窗口，被加载url并打开的页面视作子窗口
                 则在子窗口中可以通过opener对象 来打开其父窗口的window对象
                 即可以通过opener对象在子窗口的页面中对父窗口window对象进行操作
        【注】1. IE不支持opener对象； 2. 在Chrome浏览器中使用opener会报 “Uncaught DOMException: Blocked a         frame with origin “null” from accessing a cross-origin…frame.” 错误，原因在于Chrome 认为跨域操作存在
        安全隐患，具体解决办法可以见（点击此处）；
        若加入以下代码：

	window.opener = null;

即表示将在单独的进程中运行新标签页；标签页之间联系一旦切断，将没有办法恢复。

（三）BOM_location对象

location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能；
【注】location既是window对象的属性，也是document对象的属性；

	console.log(window.location === document.location); // true

（1）location对象属性

        location对象将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段；
在这里插入图片描述
        hash：锚点 url中#后边的部分一般用来实现页内跳转例如百度百科里边的分栏
        host：主机名端口号浏览器的端口号默认8080
        【ps】利用IP：端口号即可从全球范围内定位到自己电脑上正在使用的某个软件;
        hostname：主机名域名/IP;
        【ps】域名：给IP起一个好记的名字
        href：显示整个url
        pathname：路径名当前存放网页文件的路径
        port：端口号
        protocol：协议
        【ps】如果在本地加载文件值为file：；如果在服务器加载文件值为http：
        search：查询字符串；跟在？后边的部分

【注】一个完整的url，将包括以下几项：
protocol(协议):host(主机名)：port（端口号）/pathname（路径）？search（查询字符串）#hash（锚点)

（2）location对象方法

在这里插入图片描述
【注】1. 调用assign()方法并跳转成功后，浏览器会留下原页面的历史记录，即在新页面点击后退键会回到原页面；而调用replace()方法，浏览器不会留下原页面记录，按后退键也回不到原页面；
2.reload()参数可选，当添加true参数后，页面将强制加载（从服务器源头重新加载）并忽略浏览器原本留下的数据缓存；

（四）BOM_history对象

（1）history属性

history.length：该属性存放着历史记录的数量；对于加载到窗口，标签页或框架中的第一个页面而言，该属性=0

	function history(){
		if(history.length == 0){
			return '这是第一次访问';
		}
		else{
			return '已经存在历史记录了';
		}
	}
	console.log(history()); //这是第一次访问

（2）history方法

       history.forword()：前进到下一条历史记录类似于浏览器中的前进按钮；
       history.back()：返回上一条历史记录类似于浏览器中的后退；
       history.go()：当参数为0时：重载当前页面的url（刷新）；
                              当参数为正数时：前进对应数量的记录；
                              当参数为负数是：后退对应数量的记录；
                              也可以给go()方法传递一个字符串参数，此时浏览器就会跳转到历史记录中包含该字符的第一个
       位置：可能前进，也可能后退，具体要看哪个为止最近；如果历史记录中不包含该字符，那将什么都不会发生；