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 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 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设计模式 State (状态模式)
2011/06/26 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python中有趣在__call__函数
2015/06/21 Python
python学习教程之使用py2exe打包
2017/09/24 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
应届毕业生自我评价分享
2013/12/15 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
2016新年年会主持词
2015/07/06 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL