js操作模態(tài)窗口及父子窗口間相互傳值示例
更新時間：2014年06月09日 11:06:23 作者：
這篇文章主要介紹了js操作模態(tài)窗口及父子窗口間相互傳值,需要的朋友可以參考下
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=UTF-8">
<title>父窗口</title>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
var obj={
test:"張三傳到子窗口",
win:window
};
var returnValue = window.showModalDialog("child.html",obj,"dialogLeft:100px;dialogTop:100px;dialogWidth:400px;dialogHeight:300px;resizable:yes");
if(returnValue != null){
document.getElementById("content").innerHTML = returnValue;
}
};
}
</script>
</head>
<body>
<div id="content" style="margin:50px;width:100px;height:150px;border:5px solid #0000ff;"></div>
<input type="button" id="btn" value="彈出子窗口">
</body>
</html>
child.html
<!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=UTF-8">
<title>子窗口</title>
<script type="text/javascript">
window.onload=function(){
//獲取url的傳參
var args = window.dialogArguments;
var win = args.win;//父窗口對象
var content=document.getElementById("content");
content.value=args.test;
var btn=document.getElementById("btn");
btn.onclick=function(){
//模態(tài)對話框?qū)⒅?
window.returnValue = content.value;
window.close();
}
}
</script>
</head>
<body>
<input type="text" id="content"><input type="button" id="btn" value="傳值給父窗口">
</body>
</html
復制代碼 代碼如下:
<!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=UTF-8">
<title>父窗口</title>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
var obj={
test:"張三傳到子窗口",
win:window
};
var returnValue = window.showModalDialog("child.html",obj,"dialogLeft:100px;dialogTop:100px;dialogWidth:400px;dialogHeight:300px;resizable:yes");
if(returnValue != null){
document.getElementById("content").innerHTML = returnValue;
}
};
}
</script>
</head>
<body>
<div id="content" style="margin:50px;width:100px;height:150px;border:5px solid #0000ff;"></div>
<input type="button" id="btn" value="彈出子窗口">
</body>
</html>
child.html
復制代碼 代碼如下:
<!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=UTF-8">
<title>子窗口</title>
<script type="text/javascript">
window.onload=function(){
//獲取url的傳參
var args = window.dialogArguments;
var win = args.win;//父窗口對象
var content=document.getElementById("content");
content.value=args.test;
var btn=document.getElementById("btn");
btn.onclick=function(){
//模態(tài)對話框?qū)⒅?
window.returnValue = content.value;
window.close();
}
}
</script>
</head>
<body>
<input type="text" id="content"><input type="button" id="btn" value="傳值給父窗口">
</body>
</html
相關(guān)文章
JavaScript實現(xiàn)反轉(zhuǎn)字符串的方法詳解
這篇文章主要介紹了JavaScript實現(xiàn)反轉(zhuǎn)字符串的方法,結(jié)合實例形式分析了字符串反轉(zhuǎn)操作,并詳細講述了相關(guān)函數(shù)的功能與使用注意事項,需要的朋友可以參考下2017-04-04
本篇文章主要介紹了js彈窗返回值(window.open方式)。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
大家瀏覽網(wǎng)頁的時候，見到過圖片跟隨鼠標移動的js特效，效果非常好，是怎么實現(xiàn)的呢，實現(xiàn)這個功能很簡單，感興趣的朋友一起看看吧2015-11-11
本篇文章主要介紹了js制作簡單的音樂播放器的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
詳解Webpack實戰(zhàn)之構(gòu)建 Electron 應(yīng)用
本篇文章主要介紹了Webpack實戰(zhàn)之構(gòu)建 Electron 應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
前端JavaScript實現(xiàn)大數(shù)據(jù)前后模糊搜索的方法詳解
這篇文章主要為大家詳細介紹了前端JavaScript實現(xiàn)大數(shù)據(jù)前后模糊搜索的四個常見方法,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2023-12-12
下面小編就為大家?guī)硪黄僯s實現(xiàn)頁面返回頂部的動畫(超簡單)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
分享XmlHttpRequest調(diào)用Webservice的一點心得
因為項目需要，以后前端、手機客戶端調(diào)用ASP.NET的Webservice來獲取信息.所以這段時間開始看Webservice，試著通過XmlHttpRequest調(diào)用Webservice，過程中碰到不少問題，也有不少的收獲2012-07-07
JavaScript超詳細實現(xiàn)網(wǎng)頁輪播圖
這篇文章主要介紹了JavaScript超詳細實現(xiàn)網(wǎng)頁輪播圖,我們經(jīng)常會看到各種輪播圖的效果，它們到底是怎樣實現(xiàn)的呢？今天我們就一起來看一下具體實現(xiàn)方法吧2021-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)多個標題吸頂效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01