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 相关文章推荐
JQuery 网站换肤功能实现代码
Nov 02 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
JavaScript canvas绘制折线图
Feb 18 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 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自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
JS面向对象编程 for Cookie
2010/09/19 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python selenium 三种等待方式解读
2016/09/15 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
图解Python变量与赋值
2018/04/03 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
单位单身证明范本
2014/01/11 职场文书
感恩之星事迹材料
2014/05/03 职场文书
新闻发布会策划方案
2014/06/12 职场文书
护士自荐信范文
2015/03/25 职场文书
会议通知
2015/04/15 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
风之谷观后感
2015/06/11 职场文书
信息简报范文
2015/07/21 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB