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 居中漂浮广告
Mar 21 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
常规表格多表头查询示例
Feb 21 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
python判断自身是否正在运行的方法
2019/08/08 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Python 绘制可视化折线图
2020/07/22 Python
django使用channels实现通信的示例
2020/10/19 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
优秀中学生事迹材料
2014/01/31 职场文书
大学生先进事迹材料
2014/02/16 职场文书
中学生家长评语大全
2014/04/16 职场文书
假释思想汇报范文
2014/10/11 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
学生通报表扬范文
2015/05/04 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
怎样写观后感
2015/06/19 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
python获取字符串中的email
2022/03/31 Python