如何通过JavaScript来实现页面间数据传递
知识点
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>
<html>
<head>
<meta charset="UTF-8">
<title>BOM案例</title>
<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){
//window的oper属性是获取创建这个页面的页面,在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属性的应用
到此这篇关于如何通过JavaScript来实现页面间数据传递的文章就介绍到这了,更多相关JS页面间数据传递内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
对表单域中的数据进行校验的时候,其中有一项比较特殊,不是简单的输入框,下拉框这些表单元素,而是自己写的一个el-table的选择弹窗,本文给大家介绍element-ui的表单验证如何清除校验提示语,感兴趣的朋友一起看看吧2024-01-01
在 localStorage 中上传和检索存储图像的示例详解
这篇文章主要介绍了在 localStorage 中上传和检索存储图像,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
本文主要对JavaScript的几种Math函数,random(),ceil(),round(),floor()的作用进行简要解析，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
vue-router路由懒加载的实现（解决vue项目首次加载慢）
这篇文章主要介绍了vue-router路由懒加载的实现（解决vue项目首次加载慢），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
在JavaScript中switch语句是一种用于多条件分支的控制语句,下面这篇文章主要给大家介绍了关于如果通过一文熟练掌握JavaScript的switch用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了简单了解JavaScript中的new Function，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
这篇文章主要为大家分享了基于Bootstrap Ace模板实现菜单和Tab页效果，感兴趣的小伙伴们可以参考一下2015-12-12
canvas有一个神奇的方法getImageData，它可以获取canvas内图像的每一个像素点的颜色值获取，而且可以改变。本文将对canvas实现图片的滤镜转化的方法进行介绍，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
在uni-app中,监听页面滚动可以使用onPageScroll生命周期函数或@scroll事件监听器,onPageScroll适用于监听整个页面的滚动事件,而@scroll事件监听器适用于监听特定组件如scroll-view的滚动,这两种方法的选择取决于监听需求的不同,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了js 闭包的9个使用场景，帮助大家更好的理解和学习JavaScript 闭包的使用，感兴趣的朋友可以了解下2020-12-12
最新评论