How bootstrap handles caching issues

Bootstrap's method of dealing with caching problems: 1. Clear the data when closing; 2. Modify the requested URL and add a timestamp to the requested URL, with statements such as "function remoteUrl(u){. ..}".

The operating environment of this tutorial: Windows 7 system, bootsrap version 3.3.7, Dell G3 computer.

After searching on Baidu, there are many similar situations. The solutions are basically as follows:

1. Clear the data when closing:

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

2. Modify The requested URL, add a timestamp to the requested URL.

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

The two solutions above 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

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

bootstrap video tutorial" "css video tutorial"

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