解決iframe作為子窗口，刷新后iframe頁面跳轉到其它頁面的問題

轉載請在頁首注明作者與出處

http://www.cnblogs.com/zhuxiaojie/p/5990262.html

前言:

在開發網站時，尤其是管理后台，我們經常會使用iframe作為內容窗口，而外面的是菜單部分，這樣就可以借助iframe，只刷新內容部分，而不刷新其它的部分。

好處:(1)給用戶的視覺效果要好，用戶看到的不會是要刷新整個頁面。

       (2)加載的資源要少，所以用時更少，而且消耗服務器的流量會少一點。

       (3)統一管理菜單內容，不需要每個頁面都寫菜單，增加，修改方便。

缺點:(1)不利於SEO。

       (2)點擊瀏覽器的刷新按鈕后，原有的頁面丟失，跳轉到默認設置好的頁面。

 

因為通常采取iframe的作法會用在菜單多的情況，一般是管理后台，所以不考慮SEO。

那么現在來解決一下第二個缺點，就是刷新頁面后,iframe中原有的頁面丟失的情況。

 

 

一：錨點

我們借助錨點來實現這個功能。至於錨點是什么，它可以標記一個頁面中的一個部分，url中以#后面跟隨的就是錨點，然后會直接定位到錨點的內容。

http://localhost:8030/#footer

假定上面的footer錨點可直接定位到頁尾(當然，這里不介紹怎么定義一個錨點)。

 

二:思路

思路:因為定位到錨點是不會進行頁面的刷新的，假如說我們可以監聽url中錨點的變化，是否可以根據這個錨點的內容通過js去設置iframe中的值呢？

答案是可以的。

 

三:實現

3.1:監聽錨點的變化

整個過程實現最為核心的部分就是，要監聽到錨點的變化。可以想像，它是一個事件，但是這個事件是比較冷門的，平時都沒有聽說過這個事件，那就是onhashchange事件

window.onhashchange = function(){
        alert("發生變化");  
}

要怎么拿到錨點的內容呢？

window.onhashchange = function(){
    var hash = location.hash;
    hash = hash.substring(1,hash.length);
    alert(hash);
}

至於前面為什么要對字符串進行截取，是因為通過location.hash拿到的內容，最前面是#，所以通過substring把#去掉。

 

3.2:設置iframe地址

既然能監聽錨點的變化，又能拿到錨點的值，那么剩下的就簡單了。

假定我們錨點的內容就是iframe的url的值，

剩下的代碼是

window.onhashchange = function(){
    var hash = location.hash;
    hash = hash.substring(1,hash.length);
    $("#baseIframe").attr("src","<%=path%>" + url);
}

這樣就完成了。每當錨點發生變化的時候， 我們就把新的地址設置到了iframe中。

 

3.3:設置錨點

那么，我們要如何設置錨點呢？在點擊菜單的時候， 調用下面的這個方法，然后我們設置錨點。

function loadIframe(url){
  var u = window.location.href;
  var end = u.indexOf("#");
  var rurl = u.substring(0,end);
  //設置新的錨點
  window.location.href = rurl + "#" + url;
}

至於為什么又要截取字符串，因為每次獲取互的href中，都會有以前的錨點，所以我們需要把以前的錨點給去掉，然后來設置新的錨點。

 

 

3.4:當頁面載入時設置iframe地址

現在的情況已經很好了，現在每當菜單點擊的時候，我們都會設置一次錨點，然后假定我們現在刷新瀏覽器的頁面，但是刷新歸刷新，url上面的錨點還是會在的。

我們只要在瀏覽器加載的時候，設置iframe中的值就可以了。

document.addEventListener('DOMContentLoaded', function () {
     var hash = location.hash;
     var url = hash.substring(1,hash.length);
     $("#baseIframe").attr("src", url);
}, false)

我這里要截取字符串的原因，同3.1部分的原因一致，當頁面加載完后，就設置iframe中的值，所以這樣無論怎么刷新，都不會丟失原有的頁面了。