最近操作iframe頁面元素比較多。涉及到在子頁面里控制父頁面元素的顯示,使用parent.document.getElementById("filterToFloders")獲取父頁面里id為filterToFloders的元素,或者是從頂層window下找到iframe頁面元素的操作-window.parent.frames["setFilterFrame"].document.getElementById("targetFloder"),獲取元素。但是現在頁面里多半是使用jQuery來獲取DOM元素,這樣混雜着原生js獲取DOM元素的操作,讓代碼整體看起來不倫不類。后來才發現jQuery選擇器本身還可以帶一個參數,傳遞選擇的范圍的,$("元素標識","元素所在范圍")。所讓代碼變得簡潔很多。而且風格統一。
如下對等操作:
javascript----------------------------------------------------------------------------jQuery
parent.document.getElementById("filterToFloders")-----------------------------------$("#filterToFloders",parent.document) //子頁面獲取iframe父頁面的DOM
window.parent.frames["setFilterFrame"].document.getElementById("targetFloder")----$("#targetFloder",window.parent.frames["setFilterFrame"].document)//子頁面獲取父頁面里的其他iframe子頁面里的DOM
window.frames["iframeChild"].document.getElementById("floader")------------------$("#floader",window.frames["iframeChild"].document)//父頁面獲取子頁面的DOM元素
除此之前還有另一種方法:$(window.frames["iframeChild"].document).find("#floader")(這種方法看到的,還沒實際驗證。)
另外可以先用jQuery選中目標父頁面或者是目標子頁面,在再這頁面上進行下一層級DOM元素的尋找。
父頁面獲取子頁面元素:
javascript:window.frames["iframeChild"].document //假如iframe的id為iframeChild
jQuery:$(window.frames["iframeChild"].document) //假如iframe的id為iframeChild
接着獲取子頁面元素:
$(window.frames["iframeChild"].document).find("#floader")
$("#floader",window.frames["iframeChild"].document)
子頁面獲取父頁面元素雷同。關鍵是獲取要找的頁面就行。