JS父页面与子页面相互传值方法


Posted in Javascript onMarch 05, 2014

一、子页面是父页面通过window.open弹出的情况
子页面要向父页面传值,只要在document前面加window.opener即可。
如:
1.父页面代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<script language="javascript">
function tanchu()
{
    window.open("Untitled-5.html");  
}
script>
<body>
    <form id="form1" name="form1" method="post" action="">
        <label> <input type="submit" name="button" id="button" value="提交"
            onclick="tanchu()" />
        label> <label> <input type="text" name="textfield" id="textfield" />
        label>
    form>
</body>
</html>
2.子页面代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<script language="javascript">
function aaa()
{
    window.opener.document.getElementByIdx('textfield').value='123123123';
}
script>
<body>
    <form id="form1" name="form1" method="post" action="">
        <label> <input type="submit" name="button" id="button" value="提交"
            onclick="aaa()" />
        label>
    form>
</body>
</html>
二、子页面是iframe框架中的页面情况

子页面要向父页面传值,只要在document前面加parent即可。
1.父页面代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<body>
    <form id="form1" name="form1" method="post" action="">
        <label> <input type="text" name="textfield" id="textfield" />
        label>
        <iframe id="myiframe" src="Untitled-3.html">iframe>
    form>
</body>
</html>
2.子页面代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<script language="javascript">
function aa()
{
    var a=parent.document.getElementByIdx('textfield').value;
    alert(a);
}
script>
<body>
    <form id="form1" name="form1" method="post" action="">
        <label> <input type="submit" name="button" id="button" value="提交"
            onClick="aa()" />
        label>
    form>
</body>
</html>

Javascript 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
js变换显示图片的实例
Apr 16 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
微信小程序实现图片上传功能
May 28 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
Js跳出两级循环方法代码实例
Sep 22 Javascript
JS和函数式语言的三特性
Mar 05 #Javascript
jquery 使用简明教程
Mar 05 #Javascript
jquery form表单序列化为对象的示例代码
Mar 05 #Javascript
js对文章内容进行分页示例代码
Mar 05 #Javascript
JavaScript获取XML数据附示例截图
Mar 05 #Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 #Javascript
javascript日期格式化示例分享
Mar 05 #Javascript
You might like
php 参数过滤、数据过滤详解
2015/10/26 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
document.createElement()用法
2013/03/13 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
js实现简单页面全屏
2019/09/17 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
Python 多线程抓取图片效率对比
2016/02/27 Python
Python实现多进程的四种方式
2019/02/22 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
python判断是空的实例分享
2020/07/06 Python
工程造价管理专业大专生求职信
2013/10/06 职场文书
年度考核自我鉴定
2014/03/19 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
岗位聘任报告
2015/03/02 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
图文详解Nginx版本平滑升级方案
2021/09/15 Servers