前提:在前一段的工作中碰到了一些頁面跳轉,子頁面跳到父頁面上的等等問題,當時頁面總是跳不對,或者跳錯,要不就是不需要重新打開窗口,卻又重新打開一個了,特此搜尋網上各大博客論壇,加上項目經驗整理一篇文章,會有后續的修改和更新,如果有錯誤還希望大家及時指出,謝謝。
一、什么是iframe?
iframe也稱作嵌入式框架,嵌入式框架和框架網頁類似,它可以把一個網頁的框架和內容嵌入在現有的網頁中。 這是一般網頁上給出的答案。然而,在說明什么是iframe之前,需要有一點提醒大家,由於iframe有諸多缺點,因此不符合標准網頁設計的理念,已經被標准網頁設計拋棄,但是美國前 10 大網站都使用了 iframe。在大部分情況下,他們用它來加載廣告。這是可以理解的,也是一種符合邏輯的解決方案。但請記住,iframe 會給你的頁面性能帶來沖擊。只要可能,不要使用 iframe。當確實需要時,謹慎的使用他們。
那么下面就來介紹iframe,我想,沒有什么比這幅圖片更能解釋iframe了,一看就明了。
iframe就是我們常用的iframe標簽:<iframe>。iframe標簽是框架的一種形式,也比較常用到,iframe一般用來包含別的頁面,超鏈接指向這個嵌入的網頁,只要給這個iframe命名就可以了。方法是<iframe name=**>,例如我命名為aa,寫入這句HTML語言<iframe width=420 height=330 name=aa frameborder=0 src=http://host.zzidc.com></iframe>,然后,網頁上的超鏈 接語句應該寫為:<a href=URL target=aa>,而這個連接,就是指圖中的衣服下的襯衫 西服 T恤的a連接,這些應該是寫在index.html里面的。這樣,大家就會對iframe有一個初步的了解了,具體的iframe的樣式什么的這里就不做解釋了。接下來的頁面鏈接才是重點,畢竟大部分公司已經摒棄了iframe的用法,只有一些框架還選擇用iframe。
二、跳轉頁面
在最近的項目中遇到的有關跳轉頁面的目前就這三個:
1.刷新當前頁: window.location.reload(true);
2.跳轉其他頁:window.location.href='此處是接口'; 是本頁面跳轉
3.跳轉其他頁:window.parent.document.
舉例說明:
1、window.location:
如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js這樣寫 即:A>B>C>D,
"window.location.href"、"location.href"、"self.location.href":D頁面自身跳轉(即本頁面跳轉);
"parent.location.href":C頁面跳轉
"top.location.href":A頁面跳轉
刷新頁面也是如此。
2.window.parent.document:
先舉一個例子:
window.parent.document.getElementById(
"myEle"
).innerHTML = html;
即指明了是在 window.parent.document 中查找 id=myEle 的元素,並把它的HTML設置為html.那么用jQuery則應如下:
1.
$(
"#myEle"
, window.parent.document).html(html);
還有一種寫法是:
2.parent.$(
"#myEle"
).html(html);
這些就很好的解釋了我在項目中遇見的這段師傅寫的代碼:
取父窗口的元素方法:$(selector, window.parent.document);
那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);
類似的,取其它窗口的方法大同小異
$(selector, window.top.document);
$(selector, window.opener.document);
$(selector, window.top.frames[0].document);
目前就是這么多,會做后續補充~~謝謝~~