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程序设计有所帮助。

时间: 2015-04-05

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

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

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

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

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

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

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

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弹出页面回传值的方法

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

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

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操作模态窗口及父子窗口间相互传值示例

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

vue 进阶之实现父子组件间的传值

本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head&g

js正则表达式 匹配两个特定字符间的内容示例

1.js截取两个字符串之间的内容: var str = "aaabbbcccdddeeefff"; str = str.match(/aaa(\S*)fff/)[1]; alert(str);//结果bbbcccdddeee 2.js截取某个字符串前面的内容: var str = "aaabbbcccdddeeefff"; tr = str.match(/(\S*)fff/)[1]; alert(str);//结果aaabbbcccddd 3.js截取某个字符串后面

vue.js使用v-model实现父子组件间的双向通信示例

本文实例讲述了vue.js使用v-model实现父子组件间的双向通信.分享给大家供大家参考,具体如下: <template> <div> 这是主页面 <h1> {{num}}</h1> <button @click="handleMins">-1</button> <hr> <!-- 作者:786905664@qq.com 时间:2017-09-24 描述:局部组件 --> <com

React父子组件间的传值的方法

父组件向子组件传值: 父组件: import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默认值0", txt1:"默认值1" } } componentDidMount(){ } parToson(){ th

js关闭模态窗口刷新父页面或跳转页面

有两个窗口: A窗口(父),B窗口(模态) A窗口里有一个DATAGRID,一个按钮. 点击按钮时,弹出B窗口(模态).在B窗口中添加数据,提交后,要求B窗口自关闭,然后刷新A窗口(父) 复制代码 代码如下: <script type="text/javascript"> function openSubWin() { window.showModalDialog('b.html', 'newwindow', 'height=500, width=400, top=0, l

js在ie下打开对话窗口的方法小结

对话框的性质分为模态对话框和非模态对话框: 1.模态对话框: 打开该对话框之后,在该对话框之外的一切操作都是被禁止的,要想进行其他操作,必须先关闭本对话框. js命令: showModalDialog(); 2.非模态对话框: 和模态对话框相反,打开之后,仍可以进行对话框之外的操作. js命令: showModelessDialog(); 以上就是小编为大家带来的js在ie下打开对话窗口的方法小结全部内容了,希望大家多多支持我们~

JS中showModalDialog关闭子窗口刷新主窗口用法详解

本文实例讲述了JS中showModalDialog关闭子窗口刷新主窗口用法.分享给大家供大家参考,具体如下: 网上找了好长时间 大都是window.opener.location.reload(),等等 都不是我想要的 最后终于发现了一个 想知道的就往下看看吧 showModalDialog和showModelessDialog 一.showModalDialog和showModelessDialog有什么不同? showModalDialog:被打开后就会始终保持输入焦点.除非对话框被关闭,否

JS与jQuery实现子窗口获取父窗口元素值的方法

本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法.分享给大家供大家参考,具体如下: 功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父窗口中input的值,并显示. js: 父窗口: <input type="text" name="currentProjectIDForDetail" id="currentProjectIDForDetail" disabled="