用JavaScript的bom操作完成窗口开闭

最新推荐文章于 2023-09-19 04:33:13 发布

BoringRong

最新推荐文章于 2023-09-19 04:33:13 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发技术体系文章标签： js弹窗 bom操作 dom js打开窗口

本文链接：https://blog.youkuaiyun.com/pbrlovejava/article/details/80600369

前端开发技术体系专栏收录该内容

18 篇文章

订阅专栏

本文介绍了JavaScript中DOM和BOM的基本操作，特别是BOM中窗口操作的使用方法，并通过一个弹窗实例进行演示。此外还展示了如何在客户管理系统中实现选择联系人的功能。

一、JavaScript有两大骚操作：

一是dom操作，即对document object model（文本对象模型）的操作

二是bom操作，即对browser object model（浏览器对象模型）的操作，这是javaScript最骚的操作了，没有十年开发经验以及英语八级都难以理解

二、JavaScript的窗口操作demo

demo的效果:

代码：

hellowin.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>弹窗demo</title>

<script type="text/javascript">
	function open_win(){
		var url = "${pageContext.request.contextPath}/hello.jsp"; 
		var param = "height=300px,width=300px";
	    window.open(url,param);
	}
	
</script>
</head>
<body>
	<input type="button" value="点我嘛~" onclick="open_win()">
</body>
</html>

用于弹出的页面hello.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>HelloWorld啊荣</h1>
</body>
</html>

三、实际应用：客户管理系统中的选择联系人功能

效果: