js操作iframe父子窗體示例
更新時間：2014年05月22日 08:58:15 作者：
這篇文章主要介紹了js如何操作iframe父子窗體,需要的朋友可以參考下
父窗體獲取iframe
window.iframeId
iframe獲取父窗口
window.parent
parent.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>Insert title here</title>
<script type="text/javascript">
function btnFn(){
window.subWin.test();
}
function get(name){
return document.getElementById(name);
}
</script>
</head>
<body>
<input id="name" type="text" value="222">
<input type="button" id="btn" value="點擊" onclick="btnFn();"><br/>
<br/><br/>
<iframe src="sub.html" id="subWin"
name="subWin" width="100%" marginwidth="0" height="100%"
marginheight="0" scrolling="Yes" frameborder="0" valign="middle"
resize="no" style="display: block;border:3px solid red;"></iframe>
</body>
</html>
sub.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>Insert title here</title>
<script type="text/javascript" >
function test(){
alert(window.parent.get("name").value);//結(jié)果:222
}
</script>
</head>
<body>
我是窗體的內(nèi)容
</body>
</html>
window.iframeId
iframe獲取父窗口
window.parent
parent.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>Insert title here</title>
<script type="text/javascript">
function btnFn(){
window.subWin.test();
}
function get(name){
return document.getElementById(name);
}
</script>
</head>
<body>
<input id="name" type="text" value="222">
<input type="button" id="btn" value="點擊" onclick="btnFn();"><br/>
<br/><br/>
<iframe src="sub.html" id="subWin"
name="subWin" width="100%" marginwidth="0" height="100%"
marginheight="0" scrolling="Yes" frameborder="0" valign="middle"
resize="no" style="display: block;border:3px solid red;"></iframe>
</body>
</html>
sub.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>Insert title here</title>
<script type="text/javascript" >
function test(){
alert(window.parent.get("name").value);//結(jié)果:222
}
</script>
</head>
<body>
我是窗體的內(nèi)容
</body>
</html>
相關(guān)文章
這篇文章主要介紹了JS對象數(shù)組中如何匹配某個屬性值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
bootstrap提示標(biāo)簽、提示框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了bootstrap提示標(biāo)簽、提示框的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖,本文的主要內(nèi)容是在導(dǎo)航條的下方做一張輪播圖，自動播放最新的重要動態(tài)，感興趣的小伙伴們可以參考一下2016-04-04
JS動態(tài)添加的div點擊跳轉(zhuǎn)到另一頁面實現(xiàn)代碼
這篇文章主要介紹了JS動態(tài)添加的div點擊跳轉(zhuǎn)到另一頁面實現(xiàn)代碼,需要的朋友可以參考下2017-09-09
下面小編就為大家?guī)硪黄厝恋脑O(shè)置與監(jiān)聽實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
JavaScript實現(xiàn)數(shù)組全排列、去重及求最大值算法示例
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)組全排列、去重及求最大值算法,結(jié)合實例形式分析了JavaScript針對數(shù)組的遞歸、遍歷、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了js兼容火狐顯示上傳圖片預(yù)覽效果的方法,涉及js調(diào)用FileReader實現(xiàn)圖片預(yù)覽功能的技巧,需要的朋友可以參考下2015-05-05
今天把JS控制checkbox全選、取消全選、刪除功能的代碼貼出來。。2008-12-12
Javascript的表單驗證-揭開正則表達(dá)式的面紗
Javascript的表單驗證-揭開正則表達(dá)式的面紗在本文重點介紹，感興趣的朋友一起學(xué)習(xí)吧2016-03-03
在開發(fā)中，我們會經(jīng)常使用?JSON.stringify(object)?來序列化對象，但JSON.stringify方法除了了第一個參數(shù)外，還有其它參數(shù)可用，今天我們一起來看看這些參數(shù)是做啥的2023-05-05