js控制iframe的刷新（頁面局部刷新）

今天遇到個問題，后台會員審核之后，頁面內的會員審核狀態要及時改變，但又不能指望用戶手動刷新（用戶體驗很不好）

如果審核頁面和顯示審核狀態時同在一個html頁面的話，那么直接用js改變div內部的文本就可以了，像下面這樣：

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

但是，后台頁面的布局是這樣的：

這畫的應該不難看出來吧，不過我還是要說明一下；

一個html中包含一個iframe1，點擊這個iframe1中的某個字段，會跳出一個模態框（用於審核的div2），審核結束后提交信息，點擊button

ok，此時數據提交到接口並進行了一系列操作（此處省略具體操作），然后div2窗口關閉，這個時候iframe1中的某些字段應該做出改變，比

如，之前審核狀態是“未審核”，在div2審核操作了之后，此時的狀態應該變為“已審核”，用戶希望的是，在點擊了button按鈕之后，狀態立即

刷新，那么我們應該在提交數據到接口，成功之后做出點什么來改變這個狀態，但是上面說了，直接用js獲取iframe1中的標簽改變其值是行不通

的，所以我們可以這么做：

function check_pass(uid) {
    $.ajax({
        type: "GET",
        url: siteurl,
        dataType: "json",
        data:{
            "c":"api",
            "m":"checkpass",
            "uid":uid
            },
        success: function(text) {
            var _body = window.parent;
            var _iframe1=_body.document.getElementById('rightMain');
            _iframe1.contentWindow.location.reload(true);
        }
    });
}

這個函數是在button點擊的時候執行的，button是存在於div2中的，發起ajax請求向接口提交數據之后，我們來看請求成功之后的代碼：

var _body = window.parent;--------------------獲取這個div2的父級窗口，那么自然是這個body了；

var _iframe1 = _body.document,getElementById('rightMain');-------------------根據id獲取iframe1這個對象；

_iframe1.contentWindow.location.reload(true);-----------------------看到reload就該知道是刷新了這個iframe1了。

就這樣，div2中的js操作實現了iframe1的刷新，現在看來真的很簡單，只不過當時繞了一些彎子，現在順便總結一下iframe窗口的刷新方法：

（注：下面的_iframe是通過各種方法獲得的iframe對象，比如通過name獲得、通過id獲取等等）

①_iframe.contentWindow.location.reload(true);

②_iframe.src=src;（前面的src是_iframe的src屬性，后面是是一個字符串值應該和它原本的屬性值相同，不然怎么叫"刷新"呢）

③$('#iframe').attr('src', $('#iframe').attr('src'));（jQuery寫法，和上面第二種同理）

--------------------------------------------------------------------------------華麗的分割符------------------------------------------------------------------------------------

（5.31）今天，又遇到一個ajax提交，iframe刷新的例子，

ajax提交的數據是從select和input中取得的，如下圖所示：

const siteurl = "{SITE_PATH}{SELF}";
const stateids=$(".stateid");
var stateval = "";
var moneyval ="";
var stateid ="";
    for(let i=0;i<size;i++){
        $(sure[i]).click(function(){
             stateval = $(state[i]).val();
             moneyval = $(money[i]).val();
              stateid = $(stateids[i]).val();
               $.ajax({ 
                   type: "GET",
                   url: siteurl,
                   dataType: "json",
                   data:{
                         "c":"api",
                         "m":"state",
                         "stateval":stateval,
                         "moneyval":moneyval,
                         "id":stateid
                        },
                    success: function(text) {
                        eco_refresh();
                   },
                    error: function(text) {
                        eco_refresh();
                   }
               });
        });
    };

因為每一條記錄都有修改這個選項，而且取值是取當前記錄的select和input的值，記錄是用類for循環語句輸出的，所以

他們的樣式以及DOM結構都是一樣的，取值的時候為了確保取值正確，用到了上面的for循環，紅字的jQuery對象依次表

示確認按鈕、select標簽、input金額標簽（select值為認籌的時候才會顯示）、input記錄ID值標簽（類型為hidden，看不

見的，僅為取id值所用）

注意這里用了let聲明變量i，這里涉及到作用域的概念，如果你用var聲明i，然后再內部var that = i，然后$(state[that])也

是可以的，對於let、var、const、this的區別會在博主理解透徹之后專門寫一篇博文來記錄，這里就不探討了。

上面的代碼不難看出，每個確認按鈕點擊的時候會提交一個ajax請求，至於為什么success和error回調都選擇刷新iframe，

這個問題，我想我在這篇博文已經有所交代：https://www.cnblogs.com/eco-just/p/9094940.html。（ajax200OK狀態下的

回調執行問題）

如此想來，提交ajax后，直接執行刷新的方法應該就OK了，但是問題卻出現了，

這是之前iframe和div提交刷新都不曾出現的問題，之前也是有input填寫信息然后取值提交的，只不過這次多了一個select

取值的問題，於是個人猜測應該是select標簽onChange事件之后，值發生改變，瀏覽器的機制好意提醒我們，但是顯然我

們是不想這種機制來干擾用戶體驗的，於是百度一下，找到了答案：

於是將解決方法添加到refresh函數：

function eco_refresh(){
    var _body = window.parent;
    var _iframe1=_body.document.getElementById('rightMain');
    window.onbeforeunload=function(){};
    _iframe1.contentWindow.location.reload(true);
}    

之后便抑制了彈窗的出現。