Comment bootstrap gère les problèmes de mise en cache

Comment bootstrap gère les problèmes de mise en cache : 1. Effacez les données lors de la fermeture ; 2. Modifiez l'URL demandée et ajoutez un horodatage à l'URL demandée, avec des instructions telles que "function remoteUrl(u){. ..}" .

L'environnement d'exploitation de ce tutoriel : système Windows 7, version bootsrap 3.3.7, ordinateur Dell G3.

Après une recherche sur Baidu, il existe de nombreuses situations similaires. Les solutions sont essentiellement les suivantes :

1 Effacer les données lors de la fermeture :

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

2. URL, ajoutez un horodatage à l'URL demandée.

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

Les deux solutions ci-dessus sont en effet efficaces, mais dans IE, la première méthode n'est pas valide et la seconde méthode est trop lourde à résoudre.

J'ai trouvé une autre solution sur Baidu, spécifiquement pour IE :

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

Cette méthode consiste à ajouter chaque action côté serveur. Dans ce cas, combien d'actions doivent être ajoutées ? L'auteur pense en fait qu'IE est trop nul et devrait quitter l'industrie Internet.

Bon, assez de vomissements, voici ma solution : modifier directement le fichier bootstrap.js

vers la ligne 1068, comme suit :

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

Les commentaires ont expliqué la solution. J'ai juste ajouté remoteUrl et ajouté l'heure après l'url demandée, pour ne pas avoir à la modifier une à une et pouvoir prendre en compte chaque navigateur.

Recommandé : "Tutoriel vidéo bootstrap" "Tutoriel vidéo CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!