js為showModalDialog()彈出視窗的頁面傳值

admin發表於2017-03-28
JS

大家知道使用window.showModalDialog()函式能夠以彈窗的形式展現一個頁面。

其實有時候並不是單純的彈出這麼一個頁面，也可以為這個彈出頁面傳值，下面就做一下簡單介紹。

程式碼例項:

主頁面程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
function OpenNew(){ 
  var im=new valueAndMethod(); 
  im.txtValue=document.getElementById("txtID").value; 
  window.showModalDialog("B.html",im,""); 
} 
function valueAndMethod(){ 
  this.txtValue="螞蟻部落"; 
  this.Method=SetTxt; 
} 
function SetTxt(str){ 
  document.getElementById("txtID").value=str; 
} 
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    OpenNew();
  }
}
</script> 
</head> 
<body> 
<form action="#"> 
<input id="txtID"  type="text" value="輸入內容" /><br /> 
<input type="button" id="bt" value="開啟新的視窗"/> 
</form> 
</body> 
</html>

B.html頁面程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
var im; 
function Load(){ 
  im=window.dialogArguments; 
  if(im.txtValue=="輸入內容"){
    document.getElementById("txt").value="螞蟻部落一"; 
  }  
  else{
    document.getElementById("txt").value=im.txtValue; 
  }
} 
function Set(){ 
  im.Method(document.getElementById("txt").value); 
} 
window.onload=function(){
  Load();
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    Set();
  }
}
</script> 
</head> 
<body> 
<form action="#"> 
<input id="txt" type="text" value="分享互助" /><br /> 
<input type="button" id="bt" value="傳遞資料"/> 
</form> 
</body> 
</html>

上面兩個頁面就實現了引數的傳遞功能，更多內容可以參閱window.showModalDialog()彈出視窗一章節。

相關文章