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 数组的 uniq 方法
Jan 23 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
jquery选择器简述
Aug 31 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
实例教学如何写vue插件
Nov 30 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 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
destoon各类调用汇总
2014/06/20 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP 验证登陆类分享
2015/03/13 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
安装dbus-python的简要教程
2015/05/05 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
深入理解python try异常处理机制
2016/06/01 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
Python类class参数self原理解析
2020/11/19 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
init进程的作用
2015/08/20 面试题
厨师岗位职责
2013/11/12 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
大学教师个人总结
2015/02/10 职场文书
公积金具结保证书
2015/05/11 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
golang生成并解析JSON
2022/04/14 Golang