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中style属性
Oct 11 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
Position属性之relative用法
Dec 14 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 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 5.0 Pear安装方法
2006/12/06 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
python修改字典内key对应值的方法
2015/07/11 Python
基于python的字节编译详解
2017/09/20 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
大专生的学习自我评价
2013/12/04 职场文书
骨干教师培训制度
2014/01/13 职场文书
企业负责人任命书
2014/06/05 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
开展警示教育活动总结
2015/05/09 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
python中的plt.cm.Paired用法说明
2021/05/31 Python