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 相关文章推荐
js实现简单模态窗口,背景灰显
Nov 14 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
javascript 面向对象编程 function也是类
Sep 17 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
PHP云打印类完整示例
2016/10/15 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
如何抽象一个Vue公共组件
2017/10/17 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Python列表推导式的使用方法
2013/11/21 Python
python构建深度神经网络(DNN)
2018/03/10 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python判断telnet通不通的实例
2019/01/26 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
Python Merge函数原理及用法解析
2020/09/16 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
小学后勤管理制度
2014/01/14 职场文书
小学生元旦广播稿
2014/02/21 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
数学教研活动总结
2014/07/02 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书