項目上做了一個具有wizard(向導)功能的菜單導航頁面,子頁面的引入通過主頁面上iframe
的src
屬性切換實現。為了有個良好的交互體驗,每次更新iframe
的src
時,主頁面上都顯示一個模態的loading效果,等iframe
指定的頁面加載完后,再通過iframe
的onload
回調來隱藏loading效果。
常規的代碼如下:
點擊菜單項時,調用setUrl
傳入需要載入的子頁面url
,顯示loading效果,頁面加載完畢,隱藏loading效果。看起來好像沒有什么問題。
由於該項目瀏覽器兼容性上要求為IE8+,就在winXP的IE8上測試了下,發現問題來了。
iframe
的onload
只執行了一次,即第一次iframe
頁面載入時觸發了onload
,后來的src
切換均沒有觸發該事件,以達到預期的效果。
老版本的IE總是比較坑的。
Google了下,發現在IE8中以iframe.onload
的形式進行事件綁定確實存在上述問題。
樂於分享的coder們在他們的博客中推薦使用IE8-私有的attachEvent
來進行事件綁定,故對原先iframe
的事件綁定部分做了調整。
調整后,在IE8中又測了下,問題得到了解決。不過還是覺得,這個代碼略顯繁瑣,項目中也使用了jQuery
為前端基礎庫,jquery在事件綁定上已經做了兼容性處理,應該直接用jquery的on方法即可,對代碼又進行了一點調整。
看起來簡單多了,測試了下也沒有問題,達到了預期的效果。