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 03 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
angularjs基础教程
Dec 25 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
vue.js实现简单购物车功能
May 30 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会话控制:Session与Cookie详解
2014/09/27 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
php计算整个目录大小的方法
2015/06/19 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
RequireJs的使用详解
2017/02/19 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
利用Python开发实现简单的记事本
2016/11/15 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Python科学画图代码分享
2017/11/29 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Python的collections模块真的很好用
2021/03/01 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
年度考核自我鉴定
2013/11/09 职场文书
工作评语大全
2014/04/26 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
亮剑观后感300字
2015/06/05 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL