快捷導(dǎo)航

JavaScript實(shí)現(xiàn)在頁(yè)面間傳值的方法

更新時(shí)間：2015年04月07日 11:08:53 作者：xugang

這篇文章主要介紹了JavaScript實(shí)現(xiàn)在頁(yè)面間傳值的方法,涉及javascript傳值的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)在頁(yè)面間傳值的方法。分享給大家供大家參考。具體如下：

問(wèn)題如下：

在 a.html 頁(yè)面中，<form> 的 onsubmit 事件調(diào)用一個(gè)方法 foo( )，打開(kāi) b.html 頁(yè)面的同時(shí)給 b.html 傳遞參數(shù)。方法 foo( ) 中需要傳遞變量參數(shù)到 b.html 頁(yè)面，在 b.html 頁(yè)面接受參數(shù)值，但不能使用服務(wù)器端技術(shù)。

解決代碼如下：

a.html頁(yè)面如下：

<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);
   //方案一（無(wú)效）
   // document.frm.action = str;
   //方案二（無(wú)效）
   // 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 頁(yè)面事先存在即可。

b.html 獲得參數(shù)值的代碼如下：

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 "";
}

補(bǔ)充：

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 頁(yè)面?zhèn)髦禃r(shí)，b.html 頁(yè)面必須事先已存在！

b.html 代碼：

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

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

用js調(diào)用迅雷下載代碼的二種方法
用js調(diào)用迅雷下載代碼的二種方法，需要的朋友可以參考一下
2013-04-04
Js 實(shí)現(xiàn)表格隔行換色一例
Js實(shí)現(xiàn)表格隔行換色一例，這種效果網(wǎng)上已經(jīng)有很多啦，每一種都有特色，請(qǐng)大家選擇使用。
2009-11-11
JS過(guò)濾url參數(shù)特殊字符的實(shí)現(xiàn)方法
本篇文章主要是對(duì)JS過(guò)濾url參數(shù)特殊字符的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
詳解BootStrap中Affix控件的使用及保持布局的美觀的方法
Affix是BootStrap中的一個(gè)很有用的控件，他能夠監(jiān)視瀏覽器的滾動(dòng)條的位置并讓你的導(dǎo)航始終都在頁(yè)面的可視區(qū)域。本文重點(diǎn)給大家介紹BootStrap中Affix控件的使用及保持布局的美觀的方法，感興趣的朋友一起看看吧
2016-07-07
JavaScript在控件上添加倒計(jì)時(shí)功能的實(shí)現(xiàn)代碼
JavaScript在控件上添加倒計(jì)時(shí)功能，主要原理是利用控件的setEnable(true)/setEnable(false)來(lái)進(jìn)行設(shè)置控件的可用與不可用狀態(tài)，實(shí)現(xiàn)過(guò)程非常簡(jiǎn)單，需要的的朋友參考下吧
2017-07-07
js中如何向數(shù)組中添加元素unshift()方法
這篇文章主要介紹了js中如何向數(shù)組中添加元素unshift()方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,
2023-12-12
JS修改地址欄參數(shù)實(shí)例代碼
本文給大家介紹js修改地址欄參數(shù)的實(shí)例代碼，并給大家附上用JS動(dòng)態(tài)改變地址欄內(nèi)容 window.location.href window.location.hash的方法，比較實(shí)用，需要的朋友參考下吧
2016-06-06
JS中的進(jìn)程和線程詳解
進(jìn)程和線程都是計(jì)算機(jī)中的概念，用于描述程序執(zhí)行時(shí)的運(yùn)行單位。在 JavaScript 中，進(jìn)程和線程的概念并不是直接暴露給開(kāi)發(fā)者的，而是通過(guò)瀏覽器或 Node.js 等執(zhí)行環(huán)境來(lái)實(shí)現(xiàn)的，文中介紹的非常詳細(xì)，感興趣的同學(xué)可以閱讀一下
2023-04-04
js基礎(chǔ)之DOM中元素對(duì)象的屬性方法詳解
下面小編就為大家?guī)?lái)一篇js基礎(chǔ)之DOM中元素對(duì)象的屬性方法詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
使用JS調(diào)用工控機(jī)(Windows)虛擬鍵盤
在工控機(jī)觸摸屏中,通過(guò)瀏覽器web端進(jìn)行表單輸入,當(dāng)聚焦表單輸入框并不會(huì)出現(xiàn)虛擬鍵盤進(jìn)行輸入,本文介紹將給大家介紹如何通過(guò)js調(diào)用工控機(jī)(Windows)虛擬鍵盤,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01