實(shí)用框架(iframe)操作代碼
常用代碼:
<iframe src="http://www.baidu.com" marginwidth="0" marginheight="0" border="0" scrolling="no" frameborder="0" width="350" height="270"></iframe> <iframe src="http://www.dbjr.com.cn/plugins/like.php?href=YOUR_URL" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>
javascript訪問frame,iframe框架和href的定向
一.frame
1.父框架到子框架的引用
知道了上述原理,從父框架引用子框架變的非常容易,即:
window.frames["frameName"];
這樣就引用了頁面內(nèi)名為frameName的子框架。如果要引用子框架內(nèi)的子框架,根據(jù)引用的框架實(shí)際就是window對(duì)象的性質(zhì),可以這樣實(shí)現(xiàn):
window.frames["frameName"].frames["frameName2"];
這樣就引用到了二級(jí)子框架,以此類推,可以實(shí)現(xiàn)多層框架的引用。
2.子框架到父框架的引用
每個(gè)window對(duì)象都有一個(gè)parent屬性,表示它的父框架。如果該框架已經(jīng)是頂層框架,則window.parent還表示該框架本身。
3.兄弟框架間的引用
如果兩個(gè)框架同為一個(gè)框架的子框架,它們稱為兄弟框架,可以通過父框架來實(shí)現(xiàn)互相引用,例如一個(gè)頁面包括2個(gè)子框架:
<frameset rows=”50%,50%”> <frame src=”1.html” name=”frame1″ /> <frame src=”2.html” name=”frame2″ /> </frameset>
在frame1中可以使用如下語句來引用frame2:
self.parent.frames["frame2"];
4.不同層次框架間的互相引用
框架的層次是針對(duì)頂層框架而言的。當(dāng)層次不同時(shí),只要知道自己所在的層次以及另一個(gè)框架所在的層次和名字,利用框架引用的window對(duì)象性質(zhì),可以很容易地實(shí)現(xiàn)互相訪問,例如:
self.parent.frames["childName"].frames["targetFrameName"];
5.對(duì)頂層框架的引用
和parent屬性類似,window對(duì)象還有一個(gè)top屬性。它表示對(duì)頂層框架的引用,這可以用來判斷一個(gè)框架自身是否為頂層框架,例如:
//判斷本框架是否為頂層框架
if(self==top){
//dosomething
}
即
if (window.top!=window.self) {
// dosomething
}
改變框架的載入頁面
對(duì)框架的引用就是對(duì)window對(duì)象的引用,利用window對(duì)象的location屬性,可以改變框架的導(dǎo)航,例如:
window.frames[0].location = "1.html";
引用其他框架內(nèi)的JavaScript變量和函數(shù)
在介紹引用其他框架內(nèi)JavaScript變量和函數(shù)的技術(shù)之前,先來看以下代碼:
<script language=”JavaScript” type=”text/javascript”> <!– function hello(){ alert(“hello,ajax!”); } window.hello(); //–> </script>
二.iframe
嚴(yán)格上應(yīng)該是使用frames數(shù)組,和 document.all。
<iframe id=myiframe src=”about:<input type=checkbox name=mycheckbox value=mycheckbox>”></iframe>
<input type=button onclick=”alert(document.frames.myiframe.document.all.mycheckbox.checked)”>
三.href
1.鏈接的 onclick 事件被先執(zhí)行,其次是 href 屬性下的動(dòng)作(頁面跳轉(zhuǎn),或 javascript 偽鏈接);
2.假設(shè)鏈接中同時(shí)存 在 href 與 onclick,如果想 讓 href 屬性下的動(dòng)作不執(zhí)行,onclick 必須得到一個(gè) false 的返回值。不信,你可以將 goGoogle 函數(shù)中的 return false 注釋掉;
3.如果頁面過長有滾動(dòng)條,且希望通過鏈接的 onclick 事件執(zhí)行操作。應(yīng)將它的 href 屬性設(shè)為 javascript:void(0);,而不要 是 #,這可以防止不必要的頁面跳動(dòng);
4.如果在鏈接的 href 屬性中調(diào)用一個(gè)有返回值的函數(shù),當(dāng)前頁面的內(nèi)容將被此函數(shù)的返回值代替;
5.在按住Shift鍵的情況下會(huì)有所區(qū)別。
6.今天我遇到的問題,在IE6.0里以href的形式訪問不到parentNode。
7.盡量不要用javascript:協(xié)議做為A的href屬性,這樣不僅會(huì)導(dǎo)致不必要的觸發(fā)window.onbeforeunload事件,在IE里面更會(huì)使gif動(dòng)畫圖片停止播放。
如:
<a href=”javascript:void(0)” onclick=”linkChangePwd()”>更改密碼</a>
調(diào)整框架的高度
window.onload = function() {
parent.document.getElementById('customiframe').style.height = document.body.clientHeight + "px";
}
相關(guān)文章
BootStrap Validator使用注意事項(xiàng)(必看篇)
針對(duì)bootstrap2和bootstrap3有不同的版本,在使用bootstrap validator時(shí)需要了解其注意事項(xiàng),下面小編把我遇到的注意事項(xiàng)分享給大家,供大家參考2016-09-09JavaScript進(jìn)階(一)變量聲明提升實(shí)例分析
這篇文章主要介紹了JavaScript變量聲明提升,結(jié)合實(shí)例形式分析了JavaScript變量聲明提升相關(guān)原理、用法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05JavaScript實(shí)現(xiàn)滑塊驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)滑塊驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11webpack如何自動(dòng)生成網(wǎng)站圖標(biāo)詳解
這篇文章主要給大家介紹了關(guān)于webpack如何自動(dòng)生成網(wǎng)站圖標(biāo)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01javascript使用輸出語句實(shí)現(xiàn)網(wǎng)頁特效代碼
這篇文章主要介紹javascript使用輸出語句實(shí)現(xiàn)網(wǎng)頁特效,有需要的朋友可以參考下2015-08-08