1. 程式人生 > >【原創】iframe頁的登入失效時,如何直接父頁面重新整理到登入頁

【原創】iframe頁的登入失效時,如何直接父頁面重新整理到登入頁

今天一個網友“乁乁輝”在群裡提到一個問題,說登入超時後返回登入頁會在iframe裡開啟,並且給瞭解決的js程式碼。其實我之前也知道有這個問題,問題如下圖所示:

1486625667922018905.png

但是倒也沒直接就去解決,感覺這個問題倒還好,不是那麼嚴重,就沒花精力去處理。正好這位熱心的網友給了我解決的程式碼了,我想那就直接用上吧,網友的程式碼如下:

blob.png

其實就是一個iframe父子視窗判斷操作的程式碼了,當判斷出來登入失效時執行一下。本來問題這樣就算解決了吧,但是我就是喜歡再進一步:如果我在每個iframe裡都加這麼一段不是有點不太方便嘛,雖然可以做到公用的js裡頁面來呼叫,但是,像【我的主頁】這個頁面,沒有呼叫任何js,如果只為了解決這個問題而專門加個js,總覺得不夠高明吧。那就還有個辦法,我感覺更好一點,就是在生成iframe的地方,動態的在iframe的document的body裡追加一個<script>,這樣只要控制住生成iframe的地方,所有在那裡生成的iframe都是沒有登入失效顯示問題的。

動態生成iframe的程式碼在loadiFrame函式裡,在iframe.load(function(){......}裡,動態的追加上判斷該視窗是否是後臺登入頁的判斷,如果是登入頁,說明登入已經失效了,要將top視窗重新整理到登入頁,邏輯其實很清楚,但這裡我遇到一個不能理解的問題,本來我是這麼寫的:

1486626899825048179.png

除錯發現這樣寫document竟然是top父視窗的document,也就是說程式碼是追加在iframe裡的body裡的,但是alert(document.URL)竟然是父視窗的,而且用瀏覽器檢視原始碼是看不到這一段的,用瀏覽器檢視元素時才能看到。我想可能是因為iframe.load是在父窗口裡執行的吧,反正有點理解不能,希望有知道的網友能給解惑一下。後來沒辦法,除錯了一下,發現用下面這樣的寫法就可以了:

1486627490993082939.png

[0]是把jquery的元素轉為js的元素,doURL就是子視窗的document了,這樣就算差不多用一個更省心的方式解決了這個問題。