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 相关文章推荐
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 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 print EOF实现方法
2009/05/21 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
smarty简单应用实例
2015/11/03 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
详解使用Python处理文件目录的相关方法
2015/10/16 Python
python daemon守护进程实现
2016/08/27 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
利用python生成照片墙的示例代码
2020/04/09 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
学校节能减排倡议书
2014/05/16 职场文书
民政工作个人总结
2015/02/28 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
比较node.js和Deno
2021/04/27 Javascript
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
Python面试不修改数组找出重复的数字
2022/05/20 Python