記錄一下iframe的坑

2021-10-23 03:29:01 字數 988 閱讀 5542

關於為什麼要用iframe,主要是因為幾個頁面有乙個共同的導航欄,為了防止**重複所以使用了iframe。

從父頁面直接訪問子頁面的dom和從子頁面直接訪問父頁面的dom都是找不到的,由於我比較習慣用jq所以以下**都是jq語句

父頁面js:$("iframe").contents().find(".子頁面dom節點class名");

子頁面js:$('.父頁面dom節點class名', parent.document);

經過實踐發現,瀏覽器在前進和後退的時候,src是不會變化的,那麼如果想在後退的時候得到離開此頁面的狀態時,就不能通過src獲取引數的。

比如我遇到的需求是,第乙個頁面是有頁碼的,當我在第二頁的時候點進去乙個item,轉到第二個頁面時,此時後退回第乙個頁面,頁碼數依舊是第一頁,如果想要保留離開時的狀態,將頁碼數存到iframe的src中是不可行的,因為iframe的src屬性在瀏覽器自帶的前進後退時是不會改變的。

我的解決方案是,存在了父頁面的某個節點的data-page屬性中,這樣每次返回第一頁是,從父節點中取資料,但這種方法只適用於狀態不多時的時候。

首先對於js動態生成的iframe和html頁面中靜態的iframe,瀏覽器也有不同的表現。

firefox:

如果iframe是靜態存在在html中時,iframe的任何src或者location改變都會被記錄到瀏覽器history中。

如果iframe是在頁面載入完成後動態建立的,那麼iframe的任何src或者location改變都不會被記錄到瀏覽器history中。

ie、chrome:

兩種iframe的src或者location改變都會被記錄到瀏覽器history中。

safari

兩種iframe的src或者location改變都不會被記錄。

iframe還是不太好用,可以使用react或者vue的巢狀路由代替,當然我也沒試過,暫時記錄一下

記錄一下使用 interval遇到的坑

當在angular controller中用到了 interval,則必須在特定時間手動清楚定時器,否則該定時器將會一直執行下去。interval.cancel timer 如果希望在該dom從頁面上移除時,停止該定時器 scope.on destroy function 完整例項說明 定時器 定時...

新入坑python 寫點東西記錄一下

python 一種高階語言 簡單一看比c簡單多了 用的python3.5 print 那些就不說了記錄一下不同的用法吧 else if可以簡寫為elif 可以轉譯多種字元 表示依舊位 可以用r 預設來表示不轉譯其中內容 來表示換行 python中的列表list 即可 aa bb cc dd len ...

記錄並分享一下前端踩坑記錄 實時更新

css3屬性transform值為小數時會導致字型變模糊。解決辦法 採用margin等其他屬性來完成需求或把值設為整數。vue路由跳轉模式為history時,重新整理網頁會導致頁面空白。解決辦法 採用雜湊模式。vue表單填寫頁面填寫一部分後切到其他頁面再切回來,頁面重新渲染導致表單資料丟失。解決辦法...