iframe及其引出的頁面跳轉問題


前提:在前一段的工作中碰到了一些頁面跳轉,子頁面跳到父頁面上的等等問題,當時頁面總是跳不對,或者跳錯,要不就是不需要重新打開窗口,卻又重新打開一個了,特此搜尋網上各大博客論壇,加上項目經驗整理一篇文章,會有后續的修改和更新,如果有錯誤還希望大家及時指出,謝謝。

一、什么是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);

 目前就是這么多,會做后續補充~~謝謝~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM