iframe之onload事件小記


項目上做了一個具有wizard(向導)功能的菜單導航頁面,子頁面的引入通過主頁面上iframesrc屬性切換實現。為了有個良好的交互體驗,每次更新iframesrc時,主頁面上都顯示一個模態的loading效果,等iframe指定的頁面加載完后,再通過iframeonload回調來隱藏loading效果。

常規的代碼如下:

點擊菜單項時,調用setUrl傳入需要載入的子頁面url,顯示loading效果,頁面加載完畢,隱藏loading效果。看起來好像沒有什么問題。

由於該項目瀏覽器兼容性上要求為IE8+,就在winXP的IE8上測試了下,發現問題來了。

iframeonload只執行了一次,即第一次iframe頁面載入時觸發了onload,后來的src切換均沒有觸發該事件,以達到預期的效果。

老版本的IE總是比較坑的。

Google了下,發現在IE8中以iframe.onload的形式進行事件綁定確實存在上述問題。

樂於分享的coder們在他們的博客中推薦使用IE8-私有的attachEvent來進行事件綁定,故對原先iframe的事件綁定部分做了調整。

調整后,在IE8中又測了下,問題得到了解決。不過還是覺得,這個代碼略顯繁瑣,項目中也使用了jQuery為前端基礎庫,jquery在事件綁定上已經做了兼容性處理,應該直接用jquery的on方法即可,對代碼又進行了一點調整。

看起來簡單多了,測試了下也沒有問題,達到了預期的效果。


免責聲明!

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



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