筆者使用的是bootstrap.js v3.0.0版本,這是VS2017MVC中自帶的,使用過程中發現modal加載頁面有嚴重的緩存問題,百度了一下,有很多類似的情況,解決方法基本上都是如下兩種:
如果你想了解更多關於Bootstrap的知識,可以點選:Bootstrap框架
1、在關閉的時候清除資料:
$("#myModal").on("hidden.bs.modal", function () { $(this).removeData("bs.modal"); });
2、修改請求的URL,在請求的URL上加上時間戳。
function remoteUrl(u){ u += '&t=' + Math.random(1000) $.get(u, '', function(data){ $('#remoteModal .modal-body').html(data) }) $('#remoteModal').modal({show:true,backdrop:false}) }
上邊的兩個解決方法確實有效,但在IE中,第1種方法無效,第2種方法解決起來太繁瑣。
我又百度到了另一種解決辦法,專門針對IE的:
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]//不加的话,IE缓存会捣乱
該辦法是要在伺服器端給每個action加上,這樣的話,這需要加多少action ,那位作者居然嫌棄IE太垃圾了應該退出網路界。
好了,吐糟完了,來上我的解決方法:直接修改bootstrap.js
檔案
位置在大約在1068行的位置,如下程式碼:
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) { var $this = $(this) var href = $this.attr('href') var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7 var remoteUrl = !/#/.test(href) && href if (remoteUrl == undefined) { remoteUrl = ""; } if (remoteUrl.indexOf("?") > -1) { remoteUrl += "&" + (new Date()).valueOf() } else { remoteUrl += "?" + (new Date()).valueOf() } //var option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) //上边的是原代码,增加了remoteUrl来解决IE下缓存的问题 var option = $target.data('modal') ? 'toggle' : $.extend({ remote: remoteUrl }, $target.data(), $this.data()) e.preventDefault() $target .modal(option, this) .one('hide', function () { $this.is(':visible') && $this.focus() }) })
註解已經說明了解決辦法,我只是增加了remoteUrl,在請求的url後加上時間,這樣就不用一個一個的修改,也能兼顧各個瀏覽器了。
以上是bootstrap的快取問題怎麼處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!