如何利用JavaScript 在页面间传值 - 钢钢 - 博客园

广顾dun
215 阅读12分钟
原文链接： www.cnblogs.com

xugang

记录一个.NET 程序员的成长

 

如何利用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 代码：

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 代码：

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 代码：

b.html <HTML> 
  <HEAD> 
    <TITLE> New Document </ TITLE> 
  </HEAD> 
  <BODY> 
    <SCRIPT LANGUAGE="JavaScript">  
        document.write(decodeURIComponent(location.search.substr(3))); 
    </SCRIPT> 
  </BODY> 
</HTML>

 

作者： XuGang   网名：钢钢
出处： xugang.cnblogs.com
声明： 本文版权归作者和博客园共有。转载时必须保留此段声明，且在文章页面明显位置给出原文连接地址！

posted on 2010-07-22 18:54 钢钢 阅读(28746) 评论(1) 编辑 收藏

评论

#1楼[楼主]18775142010/7/22 19:19:47 2010-07-22 19:19 钢钢  

?
1 2 3 4 <SCRIPT LANGUAGE="JavaScript">    document.write( decodeURIComponent(location.search.substr(3) ) );    var s = '?a=' +  encodeURIComponent( '<script>alert(1)<\/script>'); </SCRIPT>

支持(0)反对(0)http://pic.cnblogs.com/face/u24048.jpg    刷新评论刷新页面返回顶部 注册用户登录后才能发表评论，请 登录 或 注册， 访问网站首页。 【推荐】超50万VC++源码: 大型组态工控、电力仿真CAD与GIS源码库！
【推荐】腾讯云新注册用户域名抢购1元起
【活动】华为云7大明星产品0元免费使用！
【推荐】又拍云强势推出超低价、低延时、超强兼容的 P2P-CDN！
【大赛】2018首届“顶天立地”AI开发者大赛
腾讯云0611 最新IT新闻:
· 对话爱立信CEO：增10%研发投资额确保技术地位
· Twitter再一次更换产品主管 或许想重点发展视频业务
· 华大基因市值7个月蒸发680亿 经营现金流节节下滑
· 卧底传销炒币群：“韭菜们”这是这么齐刷刷被割掉几十亿的
· 詹姆斯·韦伯望远镜发射日期再推迟 2021年3月才发射
» 更多新闻... 最新知识库文章:
· 如何提升你的能力？给年轻程序员的几条建议
· 程序员的那些反模式
· 程序员的宇宙时间线
· 突破程序员思维
· 云、雾和霭计算如何一起工作
» 更多知识库文章...

导航

统计

  • 随笔 - 302
  • 文章 - 27
  • 评论 - 1427
  • 引用 - 68

公告


穷则独善其身
达则兼济天下

新闻
昵称：钢钢
园龄：10年11个月
荣誉：推荐博客
粉丝：634
关注： 69

搜索

   

常用链接

我的标签

随笔分类(342)

随笔档案(302)

文章分类(26)

Blog

DotNET Tool

Other Tool

Total

Web Design Tool

Website

图像相关工具

  • My Diagram
  • 在线绘制流程图工具
  • pixlr图片编辑
  • pixlr是拥有Photoshop般效果的在线编辑应用，它有层、滤镜或是图章等常用功能。
  • 开源图标
  • 这里有非常多的图标资源，而且是开源的，随便拿来用吧。
  • 配色方案工具
  • 配色方案 - 在线工具
  • 图标搜索引擎A
  • 如果需要什么图标，可以试试图标的搜索引擎，不过只支持英文。
  • 图标搜索引擎B
  • 如果需要什么图标，可以试试图标的搜索引擎，不过只支持英文。
  • 在线UI设计工具
  • 一款在线UI设计工具。在和客户或团队一起讨论UI设计的时候，可以使用。
  • 在线的图表绘制工具
  • 它是一款在线的图表绘制工具，如果不愿意使用Visio，可以试试Gliffy。

积分与排名

  • 积分 - 501345
  • 排名 - 263

最新评论

  • 1. Re:关于C# 中的Attribute 特性
  • 确实不错啊，不错的文章，必须顶一下！
  • --楚人未央
  • 2. Re:C# 浅拷贝与深拷贝区别
  • 建议博主好好了解一下引用类型和对象。1、引用类型是变量指向对象的引用，假如变量A指向"123",变量B=变量A（B指向了A指向的对象，现在"123"被两个变量指向了）;然后A="321"，这个赋值只是......
  • --邵传奇
  • 3. Re:浅谈ThreadPool 线程池
  • 正在研究线程池，我用线程池时，没显示显示结果，正在找线程池的启动方法，原来线程池不需要启动。
  • --okjulien
  • 4. Re:C# 实体类生成工具
  • 标准的get,和set,有点多，哈哈！
  • --以胸娶人

阅读排行榜

评论排行榜

推荐排行榜

Powered by:
博客园
Copyright © 钢钢

avatar
文章
阅读
粉丝