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 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
vue调用语音播放的方法
Sep 27 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
php 字符串替换的方法
2012/01/10 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
js控制frameSet示例
2013/09/10 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python实现ip地址的包含关系判断
2020/02/07 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
教师新年寄语
2014/04/03 职场文书
企业晚会策划方案
2014/05/29 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
golang内置函数len的小技巧
2021/07/25 Golang