js操作iframe父子窗體示例
更新時(shí)間：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="點(diǎn)擊" 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="點(diǎn)擊" 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)文章
這篇文章主要介紹了微信小程序封裝自定義彈窗的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
JS、jquery實(shí)現(xiàn)幾分鐘前、幾小時(shí)前、幾天前等時(shí)間差顯示效果的代碼實(shí)例分享
在新浪微博首頁(yè)看到每條微博后邊顯示的時(shí)間并不是標(biāo)準(zhǔn)的年-月-日格式，而是經(jīng)過(guò)換算的時(shí)間差，如：發(fā)表于5分鐘前、發(fā)表于“2小時(shí)前”，比起標(biāo)準(zhǔn)的時(shí)間顯示格式，貌似更加直觀和人性化2014-04-04
真見(jiàn)識(shí)了-全代碼編寫的圖片...2007-08-08
javascript實(shí)現(xiàn)打磚塊小游戲(附完整源碼)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)打磚塊小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了詳解基于Wepy開(kāi)發(fā)小程序插件(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-08-08
一分鐘理解js閉包，關(guān)于js閉包的內(nèi)容介紹了很多，本文帶著大家快速理解什么是js閉包，感興趣的小伙伴們可以參考一下2016-05-05
JS簡(jiǎn)單數(shù)組排序操作示例【sort方法】
這篇文章主要介紹了JS簡(jiǎn)單數(shù)組排序操作,結(jié)合實(shí)例形式分析了javascript使用sort方法進(jìn)行數(shù)組排序的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
uniapp幾行代碼解決滾動(dòng)穿透問(wèn)題(項(xiàng)目實(shí)戰(zhàn))
這篇文章主要介紹了uniapp幾行代碼解決滾動(dòng)穿透問(wèn)題,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文字滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
一般來(lái)說(shuō)中文亂碼用js結(jié)合escape來(lái)解決，但下面的方法是一般后臺(tái)中的一些問(wèn)題，需要注意下輸出順序，先聲明編碼類型在輸出內(nèi)容是個(gè)好習(xí)慣。2009-12-12