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实现无刷新DropDownList联动实现代码
Mar 08 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
JS加载解析Markdown文档过程详解
May 19 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/10/09 PHP
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
Js的MessageBox
2006/12/03 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python查看模块安装位置的方法
2018/10/16 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
Python count函数使用方法实例解析
2020/03/23 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
回门宴答谢词
2014/01/13 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
安全协议书范本
2014/04/21 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
小英雄雨来观后感
2015/06/09 职场文书
工作收入证明模板
2015/06/12 职场文书