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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 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使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
Python使用multiprocessing创建进程的方法
2015/06/04 Python
深入浅析Python字符编码
2015/11/12 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
求职推荐信
2013/10/28 职场文书
计算机专业毕业生的自我评价
2013/11/18 职场文书
党员作风建设自查报告
2014/10/23 职场文书
网吧员工管理制度
2015/08/05 职场文书
礼仪培训心得体会
2016/01/22 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL