JavaScript实现在页面间传值的方法


Posted in Javascript onApril 07, 2015

本文实例讲述了JavaScript实现在页面间传值的方法。分享给大家供大家参考。具体如下:

问题如下:

在 a.html 页面中,<form> 的 onsubmit 事件调用一个方法 foo( ),打开 b.html 页面的同时给 b.html 传递参数。方法 foo( ) 中需要传递变量参数到 b.html 页面,在 b.html 页面接受参数值,但不能使用服务器端技术。

解决代码如下:

a.html页面如下:

<html>
<head>
  <title> demo </title>
  <meta name="Author" content="xugang" />
  <script type="text/javascript">
  function foo(){
   var a ="abc"; // a为变量值
   var str = "b.html?id="+a+";";
   //alert(document.frm.action);
   //方案一(无效)
   // document.frm.action = str;
   //方案二(无效)
   // window.location.href = str;
   //方案三(有效)
   window.location.replace(str);
   return false;
  }
 </script>
</head>
<body>
   <FORM name="frm" method="get" 
   onsubmit = "return foo()" >
      <INPUT TYPE="SUBMIT" />
   </FORM>
</body>
</html>

注意:必须 b.html 页面事先存在即可。

b.html 获得参数值的代码如下:

b.html 部分代码

var getQueryString = function(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return r[2]; return "";
}

补充:

myjs.js 代码:

function foo(){ 
    var str = "abc"; 
    //document.forms[0].hid.value = str; 
    var frm = window.event.srcElement; 
    frm.hid.value = str; 
    return true; 
}

a.html 代码:

<html> 
<head> 
 <title> demo </title> 
 <meta name="Author" content="xugang" /> 
 <script src="myjs.js"></script> 
</head> 
<body> 
 <FORM name="frm" METHOD="get" ACTION="b.html" 
 onsubmit="return foo()"> 
  <INPUT TYPE="hidden" id="hid" name="hid"> 
  <INPUT TYPE="submit" value="提交"> 
 </FORM> 
</body> 
</html>

注意:给 b.html 页面传值时,b.html 页面必须事先已存在!

b.html 代码:

<HTML> 
 <HEAD> 
  <TITLE> New Document </TITLE> 
 </HEAD> 
 <BODY> 
  <SCRIPT LANGUAGE="JavaScript"> 
   document.write(decodeURIComponent(location.search.substr(3)));
  </SCRIPT> 
 </BODY> 
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
javascript Number 与 Math对象的介绍
Nov 17 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 #Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 #Javascript
TypeScript具有的几个不同特质
Apr 07 #Javascript
实现前后端数据交互方法汇总
Apr 07 #Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 #Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 #Javascript
javascript实现画不相交的圆
Apr 07 #Javascript
You might like
PHP的面试题集
2006/11/19 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
vue中的计算属性实例详解
2018/09/19 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
使用python实现画AR模型时序图
2019/11/20 Python
Python实现验证码识别
2020/06/15 Python
Pycharm调试程序技巧小结
2020/08/08 Python
golang/python实现归并排序实例代码
2020/08/30 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
python中pyplot基础图标函数整理
2020/11/10 Python
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
绿色出行口号
2014/06/18 职场文书
学校社会实践活动总结
2014/07/03 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
合作协议书模板2014
2014/09/26 职场文书
欠条样本
2015/07/03 职场文书