JavaScript-BOM编程

导读:本篇文章讲解 JavaScript-BOM编程,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、window.open和window.close

1、BOM编程中,window对象是顶级对象,代表浏览器窗口
2、window有open和close方法,可以开启窗口和关闭窗口

示例代码:

<body>
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');" />
		<input type="button" value="开启百度当前窗口" onclick="window.open('http://www.baidu.com','_self');" />
		<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com','_blank');" />
		<input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com','_parent');" />
		<input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com','_top');" />
		
		<input type="button" value="开启指定窗口" onclick="window.open('SSS-open窗口测试.html');" />
</body>

窗口测试.html

<body>
		<input type="button" value="关闭指定窗口" onclick="window.close();">
	</body>

二、弹出确认框

示例代码:

<body>
		<script type="text/javascript">
			function del(){
				/* var ok = window.confirm("亲,你确认删除此消息吗?");
				if(ok){
					alert("正在删除数据!");
				}
			} */
			//优化
			if(window.confirm("亲,你确认删除此消息吗?")){
				alert("正在删除数据!");
				}
			}
		</script>
		<input type="button" value="弹出警示框" onclick="window.alert('警示信息!');" /> 
		
		<!-- 删除操作的时候都要提前先得到用户的确认 -->
		<input type="button" value="弹出确认框(删除)" onclick="window.del();" /> 
	</body>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、如果当前窗口不是顶级窗口,将当前窗口设置为顶级窗口

核心语法:

if(window.top != window.self){

    window.top. location = window.self. location;

}

示例代码:

<body>
		<iframe src="007-顶级窗口测试页面.html" width="500px" height="500px"></iframe>
	</body>

顶级窗口测试页面.html:

<body>
		<script type="text/javascript">
			//如果当前这个窗口不是顶级窗口的话,将当前窗口设置为顶级窗口.
			function setTop(){
				//window是当前浏览器的窗口,代表007.html
				//"当前窗口的顶级窗口"如果"不是自己"
				//window.top就是当前窗口对应的顶级窗口
				//window.self表示当前自己这个窗口
				//window.top 是006窗口
				//window.self 是007窗口
				if(window.top != window.self){
					window.top.location = window.self.location;
					}
			}
		</script>
		007-html
		<input type="button" value="把不是顶级窗口的设置成顶级窗口" onclick="setTop();">
	</body>

在这里插入图片描述
在这里插入图片描述

四、历史记录

window.history.back();    window.history.go(-1);    window.history.go(1);

示例代码:

<body>
		<a href="004-history测试页面.html">004-history测试呀!</a>
		<!-- 前进不常用!!!!! -->
		<input type="button" value="前进" onclick="window.history.go(1)" />
	</body>

历史测试页面.html:

<body>
		004 page!
		<input type="button" value="后退" onclick="window.history.back();" />
		<input type="button" value="后退" onclick="window.history.go(-1);" />
	</body>

在这里插入图片描述
在这里插入图片描述

五、设置浏览器地址栏上的URL

跳转页面可以通过多种方式:(这些都是发送请求!!!!)
      第一种方式:直接在浏览器地址栏上写URL。(重点)

      第二种方式:可以点击超链接(重点)

      第三种方式:提交表单(重点)

      第四种方式:window.open(url,target) (了解)

      第五种方式:js代码(重点)

window.location.href
      window.location
      document.location.href
      document.location

通过浏览器向服务器发送请求,通常是以上的五种方式。只有form可以动态的修改数据!
示例代码:

<body>
		<script type="text/javascript">
			function goBaidu(){
				/* var locationS = window.location;
				locationS.href = "http://www.baidu.com"; */
				
				// window.location.href = "http://www.126.com";
				// window.location = "http://www.126.com";
				
				//document.location.href = "http://www.baidu.com";
				document.location = "http://www.baidu.com";
				
				
				}
		</script>
		<input type="button" value="百度" onclick="goBaidu();" />
	</body>

在这里插入图片描述
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/87544.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!