javascript不同页面传值的改进版


Posted in Javascript onSeptember 30, 2008

其实原理也很简单。同样先通过getAttribute判断type属性,捕捉到按钮。然后在按钮onclick时把i通过url传入子页面。

<h2>input1</h2> 
<input type="text" /><input type="submit" /> 
<h2>input2</h2> 
<input type="text" /><input type="submit" /> <script type="text/javascript"><!-- 
var aInput = document.getElementsByTagName("input"); 
for (i = 0 ; i < aInput.length ; i++ ) 
{ 
( 
function (i){ 
if (aInput[i].getAttribute("type") == "submit") 
{ 
aInput[i].onclick = function (){ 
window.open('b.html?'+i,'newwindow','height=100,width=400') 
} 
} 
} 
)(i) 
} 
// --></script>

子页面用slice方法对url进行切分。并使用window.opener方法捕捉到父页面的文本框,进行赋值。 一切就OK了
<h2>openWindow</h2> 
<input type="text" /><input type="submit" /> <script type="text/javascript"><!-- 
var aInput = document.getElementsByTagName("input"); 
for (i = 0 ; i < aInput.length ; i++ ) 
{ 
if (aInput[i].getAttribute("type") == "text") var textboxB = new Object(aInput[i]); 
if (aInput[i].getAttribute("type") == "submit") var btnB = new Object(aInput[i]); 
} 
btnB.onclick = function(){ 
var sTextValue = textboxB.value 
var aInput = window.opener.document.getElementsByTagName("input"); 
var sUrl = document.location; 
var sNo = sUrl.toString().slice(-1) 
window.opener.aInput[sNo-"1"].value = sTextValue 
window.close(); 
} 
// --></script>

还没明白的朋友看一下原理图就知道了
javascript不同页面传值的改进版

Javascript 相关文章推荐
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
理解javascript中的严格模式
Feb 01 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
vue路由跳转传参数的方法
May 06 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
简明json介绍
Sep 28 #Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 #Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 #Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 #Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 #Javascript
js每次Title显示不同的名言
Sep 25 #Javascript
Js动态创建div
Sep 25 #Javascript
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
python3 与python2 异常处理的区别与联系
2016/06/19 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
python输出数学符号实例
2020/05/11 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
python在地图上画比例的实例详解
2020/11/13 Python
yy结婚证婚词
2014/01/10 职场文书
保护环境倡议书
2014/04/14 职场文书
企业口号大全
2014/06/12 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
先进个人申报材料
2014/12/30 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
MySQL基础(一)
2021/04/05 MySQL
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python