How to deal with bootstrap caching problem

The author is using bootstrap.js v3.0.0 version, which comes with VS2017MVC. During the use, I found that the modal loading page has serious caching problems. After searching on Baidu, there is For many similar situations, the solutions are basically the following two:

If you want to know more about Bootstrap, you can click: Bootstrap Framework

1. Clear data when closing:

 $("#myModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
    });

2. Modify the requested URL at the requested URL Add timestamp.

function remoteUrl(u){
	u += '&t=' + Math.random(1000)
    $.get(u, '', function(data){
        $('#remoteModal .modal-body').html(data)
    })
    $('#remoteModal').modal({show:true,backdrop:false})
}

The above two solutions are indeed effective, but in IE, the first method is invalid and the second method is too cumbersome to solve.

I found another solution on Baidu, specifically for IE:

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]//不加的话，IE缓存会捣乱

This method is to add each action on the server side. In this case, how many actions need to be added? , that author actually thinks that IE is too rubbish and should quit the Internet industry.

Okay, I’m done vomiting, here’s my solution: directly modify the bootstrap.js file

The position is about line 1068, as follows:

 $(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()
      })
  })

The comment has explained the solution. I just added remoteUrl and added the time after the requested url, so that I don’t have to modify it one by one and can take into account each browser.

The above is the detailed content of How to deal with bootstrap caching problem. For more information, please follow other related articles on the PHP Chinese website!