JavaScript实现在页面间传值的方法

本文实例讲述了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程序设计有所帮助。

(0)

相关推荐

  • JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

    但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能. 下面是具体的做法: 一:跳转到新页面,并且是在新窗口中打开时: 复制代码 代码如下: function gogogo() { //do someghing here... window.open("test2.html"); } window是一个javascript对象,可以用它的open方法,需要注意的是,如果这个页面不是一相相对路径,那么要加http://,比如: 复

  • js操作模态窗口及父子窗口间相互传值示例

    parent.hmtl 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset

  • JavaScript实现弹出子窗口并传值给父窗口

    新建父窗口页面: 加入以下脚本 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>First</title> </head> <script type="text/javascript"> function ShowDialog(Url) {    

  • JS父页面与子页面相互传值方法

    一.子页面是父页面通过window.open弹出的情况子页面要向父页面传值,只要在document前面加window.opener即可. 如: 1.父页面代码: <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><titl

  • JavaScript新窗口与子窗口传值详解

    window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ window.open(pageURL,name,parameters) pageURL 为子窗口路径 name 弹出窗口的名字 parameters 为窗口参数(各参数用逗号分隔) alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 depended | yes/n

  • javascript弹出页面回传值的方法

    本文实例讲述了javascript弹出页面回传值的方法.分享给大家供大家参考.具体实现方法如下: a1.html 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Window 1 </TITLE> </HEAD>   <BODY> <H1>Windo

  • JS中Iframe之间传值及子页面与父页面应用

    在js中,我们时常用到用iframe做系统框架,在子页面也,父页面之间的值传递是一个问题,下面是js获取父窗体和子窗体的对象js: 1.在iframe子页面中获取父页面的元素: a>window.parent.document这个是获取父页面document中的对象: b>如果要获取父页面js中的方法:window.parent.xxxx():xxxx()为方法: 2.在父页面中获取iframe子页面中的元素: a> 复制代码 代码如下: var child = document.get

  • js创建子窗口并且回传值示例代码

    Copy 直接可以使用哦 亲们! 复制代码 代码如下: //父窗口 function onClick(){ var k = showModalDialog( "view/WriteKey.jsp", 包含的页面 "newwindow", 固定取值 "dialogHeight:200px; dialogWidth:400px; 宽度 toolbar:no; 是否有工具栏 menubar:no; 是否有菜单栏 scrollbars:no; 滚蛋条 resiza

  • javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例第1/2页

    先简单介绍一下基本知识: 一.window.open()支持环境: Java1.0+/J1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: window.open(pageURL,name,parameters) 其中: pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔) 三.各项参数 其中yes/no也可使用1/0:pixel value为具体的数值,单位象素. 参数 | 取值范围 | 说明 alwaysLowered | y

  • JS简单实现父子窗口传值功能示例【未使用iframe框架】

    本文实例讲述了JS简单实现父子窗口传值功能.分享给大家供大家参考,具体如下: 父窗口页面father.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>父窗口 </TITLE> <script language="javascript"> <!-- functio

随机推荐