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 相关文章推荐
改写一个简单的菜单 弹性大小
Dec 02 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
vue实现图书管理系统
Dec 29 Vue.js
简易的投票系统以及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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
基于php split()函数的用法详解
2013/06/05 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
javascript实现导航栏分页效果
2019/06/27 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
Python读取网页内容的方法
2015/07/30 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
一些PHP的面试题
2015/05/06 面试题
本科毕业生求职自荐信
2014/04/09 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
财务部会计岗位职责
2015/02/03 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
2019广播稿怎么写
2019/04/17 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏