項目上做了一個具有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方法即可,對代碼又進行了一點調整。

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