JavaScript实现在页面间传值的方法_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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, 传值
页面
javascript页面传值、javascript页面间传值、javascript跨页面传值、js实现页面跳转并传值、ajax实现两个页面传值,以便于您获取更多的相关知识。

时间: 2024-09-17 17:36:47

JavaScript实现在页面间传值的方法_javascript技巧的相关文章

JavaScript组件焦点与页内锚点间传值的方法_javascript技巧

本文实例讲述了JavaScript组件焦点与页内锚点间传值的方法.分享给大家供大家参考.具体分析如下: 上述的这两个小功能在一些新式的手机页面是很有用的. 如何光标放上输入框就触发事件,离开输入框就触发另一个事件呢?即使用户不输入任何东西-- 页间传值很简单,但在页内的锚点之间是如何传值呢? 一.基本目标 有一个页面,上面有一个输入框,一个超级链接,这两个东西是没有任何关联的, 只是因为功能不大,所以把两个功能合起来写 1.输入框功能 一旦把光标放上对话框背景就变成红色,一旦用户的鼠标点击其他地

iOS通过block在两个页面间传值的方法_IOS

一.功能需求 在第一个页面中有一个button和一个label,label上默认显示"哈哈",点击button进入第二个页面.在第二个页面有一个UITextField和一个button2,点击button2回到第一个页面,但同时第一个页面的label上显示的文字修改为刚刚在UITextField写进去的文字. 二.先定义block 在要传值得那个页面定义含有block参数的方法,即在第二个页面的.h文件中定义: 重新定义:typedef void (^ReturnTextBlock)(

JavaScript实现同一页面内两个表单互相传值的方法_javascript技巧

本文实例讲述了JavaScript实现同一页面内两个表单互相传值的方法.分享给大家供大家参考.具体如下: 有时候我们在提交表单的时候需要将两个表单的值互相传递,那么如何实现呢?其实很简单,就是用JavaScrip获取任一表单的值,然后赋给另一个,具体可看代码,代码很有意思,也很实用. 运行效果截图如下: 具体代码如下: <html> <head> <title>JavaScript同一页面两个表单互相传值</title> <meta http-equi

JavaScript实现弹出模态窗体并接受传值的方法_javascript技巧

本文实例讲述了JavaScript实现弹出模态窗体并接受传值的方法.分享给大家供大家参考,具体如下: function shows(zwbh){ var sUrl=window.showModalDialog('zlzx_edit.asp?xmbid=<%=Request("xmbid")%>&zlbh='+zwbh+'&typeid=<%=typeid%>','window','dialogWidth=500px;dialogHeight=24

JavaScript父子窗体间的调用方法_javascript技巧

本文实例讲述了JavaScript父子窗体间的调用方法.分享给大家供大家参考.具体如下: 如果要打开一个新窗口,使用 window.open( ) 方法. 如果要关闭自身窗口,使用 window.close( ) 方法. 一.父窗体 为了便于父窗口操作子窗口,可以为 window.open( ) 方法定义一个变量,例如: var opW = window.open("tests.html","popup","width=300,height=300&quo

javascript弹出页面回传值的方法_javascript技巧

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

JavaScript获取对象在页面中位置坐标的方法_javascript技巧

本文实例讲述了JavaScript获取对象在页面中位置坐标的方法.分享给大家供大家参考,具体如下: <script language="javascript" type="text/javascript" > function getXY(Obj) { var h = Obj.offsetHeight; for (var sumTop=0,sumLeft=0;Obj!=document.body;sumTop+=Obj.offsetTop,sumLeft

嵌入式iframe子页面与父页面js通信的方法_javascript技巧

本文实例讲述了嵌入式iframe子页面与父页面js通信的方法.分享给大家供大家参考.具体分析如下: iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信. 一.同域下父子页面的通信 父页面 parent.html: 复制代码 代码如下: <html> <head> <script type="text/javascr

js获取url传值的方法_javascript技巧

本文实例讲述了js获取url传值的方法.分享给大家供大家参考,具体如下: js获取url参数值: index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数 根据获取html的参数值控制html页面输出 一.字符串分割分析法 这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案,相当于asp的request.querystring,PHP的$_GET 函数: <Scr