知识点

1、Window. opener 属性一个可读可写的属性使用 window.open 打开两个窗口之间存在着关系“父子”关系。子窗口可以通过 window.opener 指向窗口访问窗口对象。优点:取值方便。只要 opener 指向窗口,就可以访问所有对象。不仅可以访问值,还可以访问窗口方法。值长度限制。缺点:两窗口存在着关系。就是需要使用 open 打开窗口,不能跨域

2、Window.cloes方法只能关闭自己打开的window,但实际应用中会有很多方式打开一个页面 

用多种方式打开一个页面然后window.close() 关闭它,在各浏览器下表现是有所不同的

3、onlick单击事件

4、input标签规定用户输入数据输入字段

5、value 属性input 元素规定值。

6、butten属性按钮

项目名称描述

名称页面传递数据,通过JavaScript来实现页面数据传递.

项目效果

 项目代码
代码1

<!DOCTYPE html&gt;
<html&gt;

	<head&gt;
		<meta charset="UTF-8"&gt;
		<title&gt;BOM案例</title&gt;
		<style>
			#id1{
				width: 50px;
				height: 50px;
				background: yellow;
			}
			#id2{
				width: 50px;
				height: 50px;
				background: green;
			}
			#choose{
				width: 110px;
				height: 110px;
				background: red;
			}
		</style>
		<script language="JavaScript">
			function SelectInput(){
//实现跳转功能xuanze.html为要跳转页面,设置其宽和高
				window.open("xuanze.html","","width = 300px,height = 300px");
			}
		</script>
	</head>

	<body align="center">
//编写第一个页面,其中有一个按钮实现跳转
		编号:<input type="text" id="id1"><br/> 
		姓名:<input type="text" id="id2"><br/>
//按钮实现跳转
		<input id="choose" type="button" value="点击选择" onclick="SelectInput()">
	</body>
</html>

代码2

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table, table td {
				border: 1px solid #000000;
				border-collapse: collapse;
			}
			#btn1{
				width: 50px;
				height: 50px;
				background: yellow;
			}
			#btn2{
				width: 50px;
				height: 50px;
				background: green;
			}
		</style>
		<script>
			function dome1(num1,nam1){
//windowoper属性获取创建这个页面的页面,在360浏览器兼容
				var fuYueMain = window.opener;
				var p1 = fuYueMain.document.getElementById("id1");
				p1.value = num1;
				var p2 = fuYueMain.document.getElementById("id2");
				p2.value = nam1;
				window.close();
			}
		</script>
	</head>

	<body>
		<table>
			<tr>
				<td>
					<input type="button" value="选择" onclick="dome1('0010','小米');"/>
				</td>
				<td><font>0010</font></td>
				<td><font>小米</font></td>
			</tr>
			<tr>
				<td>
					<input type="button" value="选择" onclick="dome1('0012','小含');"/>
				</td>
				<td><font>0012</font></td>
				<td><font>小含</font></td>
			</tr>
		</table>
	</body>

</html>

 完成思路

首先编写第一个页面“打开xuanze.html”以及第二个页面”xuanze.html“,目的是制作页面,使用open()方法打开弹出的页面,其中有个按钮实现跳转,点击按钮实现跳转“xuanze.html”页面,选择其中一个值,相应的值会返回到前一个页面,实现页面传输数据

项目目的

理解window对象模型概念

掌握open()方法的应用

掌握windon.opener属性的应用

over

原文地址:https://blog.csdn.net/2301_77405158/article/details/130146099

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_14927.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注