以往一直在編寫的都是前台的UI,很少使用到frameset、iframe,對其了解也是十分有限,只是知道其可以為其當前頁面引入html文件成為當前頁的一部分,但是這兩天在做后台UI界面的時候,發現這樣的框架也是有相當多知識點在里面的。那框架是啥?可以這樣說:通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架,並且每個框架都獨立於其他的框架。那么關於框架,有幾個方面是需要我了解的:
(1)獲得html頁面上的frame
window.frames可以獲得本頁面上所有frame集合,用法與document.forms,document.imgs的用法相似,這是這里用的是window對象,獲取某個框架可以這樣做window.frames[0]、window.frames['frameName']、frames['frameName']、frames[0]、self.frames[0],此處self與window等價,相當於本頁面的window對象。
這里也還要再看兩個屬性,contentWindow、contentDocument兩個屬性,也是可以用來獲取子窗口,框架的window對象的。
contentWindow 兼容各個瀏覽器,可取得子窗口的 window 對象。
contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 對象。
假如我要刷新本頁面中第一個框架的頁面,可以怎么做:
window.frames[0].contentWindow.location.reload();
(2)父框架調用子框架的變量或函數
結合上面說的獲得頁面上的frame,那么調用子框架的變量或是函數可以這樣來:
frames[0].a; frames[0].refresh();
alert(frames[0].location.href);
這是調用第一個框架里面的a變量和refresh函數。
(3)子框架調用父框架的變量或函數
對於子框架調用父框架的這種情況下,window有個屬性叫parent,用來調用上層框架的,所以可以這樣來:
window.parent.a;
window.parent.refresh();
這是調用子框架調用父框架的a變量和refresh函數。
(4)兄弟框架之間的調用
可以通過它們的父框架來相互調用,可以這樣做
self.parent.frames['child1'];
self.parent.frames['child2'];
(5)多層框架的調用
window.frames[0].frames[2];
window.frames['child_1'].frames['sub_child_3'];
(6)頂層框架
首先需要判斷是否為頂層框架,也就是根,可以這樣來做:
if(self==window.top){ //.... } /*window的另外一個屬性top,它表示對頂層框架的引用,這可以用來判斷一個框架自身是否為頂層框架*/
基本關於frameset和iframe之間的互相調用知識點就這些,這個嘛,忽略,http://t.cn/RUbL4rP!
