js操作模態(tài)窗口及父子窗口間相互傳值示例
更新時(shí)間：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;//父窗口對(duì)象
var content=document.getElementById("content");
content.value=args.test;
var btn=document.getElementById("btn");
btn.onclick=function(){
//模態(tài)對(duì)話框?qū)⒅?
window.returnValue = content.value;
window.close();
}
}
</script>
</head>
<body>
<input type="text" id="content"><input type="button" id="btn" value="傳值給父窗口">
</body>
</html
復(fù)制代碼 代碼如下:
<!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
復(fù)制代碼 代碼如下:
<!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;//父窗口對(duì)象
var content=document.getElementById("content");
content.value=args.test;
var btn=document.getElementById("btn");
btn.onclick=function(){
//模態(tài)對(duì)話框?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)文章
webpack dll打包重復(fù)問題優(yōu)化的解決
在使用dll plugin過程中出現(xiàn)的一個(gè)包依賴問題，這個(gè)問題導(dǎo)致打出來的包會(huì)包含重復(fù)的代碼。這篇文章主要介紹了webpack dll打包重復(fù)問題優(yōu)化的解決，感興趣的小伙伴們可以參考一下2018-10-10
javascript模擬實(shí)現(xiàn)計(jì)算器
這篇文章主要為大家詳細(xì)介紹了javascript模擬實(shí)現(xiàn)計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
本文詳細(xì)講解了使用JS動(dòng)態(tài)構(gòu)建目錄樹的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
本文主要介紹用JavaScript刷新上級(jí)頁面和當(dāng)前頁面。附上具體實(shí)例代碼。需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript生成圖形驗(yàn)證碼的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了微信小程序 搜索框組件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例代碼
像平時(shí)購物選擇地址時(shí)一樣，通過選擇的省動(dòng)態(tài)加載城市列表，通過選擇的城市動(dòng)態(tài)加載縣區(qū)列表，從而可以實(shí)現(xiàn)省市縣的三級(jí)聯(lián)動(dòng)，下面使用原生的JavaScript來實(shí)現(xiàn)這個(gè)功能，需要的朋友參考下吧2016-02-02
這篇文章主要介紹了JavaScript執(zhí)行機(jī)制，想要搞懂JavaScript執(zhí)行機(jī)制，便與進(jìn)程與線程的概念脫不了干系，下面我們就來看看這JavaScript執(zhí)行機(jī)制的具體介紹吧,需要的朋友可以參考一下2022-08-08
這篇文章主要給大家介紹了關(guān)于webpack2.0搭建前端項(xiàng)目的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用webpack2.0具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
JavaScript調(diào)用傳遞變量參數(shù)的相關(guān)問題及解決辦法
本文給大家介紹javascript調(diào)用傳遞變量參數(shù)的相關(guān)問題及解決辦法，涉及到j(luò)s調(diào)用傳遞參數(shù)相關(guān)知識(shí)，對(duì)js調(diào)用傳遞參數(shù)感興趣的朋友一起學(xué)習(xí)吧2015-11-11