Comment gérer le problème de mise en cache du bootstrap-Tutoriel d'amorçage-php.cn

Comment gérer le problème de mise en cache du bootstrap

angryTom

Libérer： 2020-05-15 09:21:05

original

2262 Les gens l'ont consulté

Comment gérer le problème de mise en cache du bootstrap

L'auteur utilise la version bootstrap.js v3.0.0, fournie avec VS2017MVC. Lors de l'utilisation, j'ai découvert que la page de chargement modal avait de sérieux problèmes de mise en cache. il existe Pour de nombreuses situations similaires, les solutions sont essentiellement les deux suivantes :

Si vous souhaitez en savoir plus sur Bootstrap, vous pouvez cliquer sur : Framework Bootstrap

1. Effacer les données lors de la fermeture :

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

Copier après la connexion

2. Modifiez l'URL demandée à l'URL demandée. Ajoutez un horodatage.

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

Copier après la connexion

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缓存会捣乱

Copier après la connexion

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, j'ai fini de vomir, voici ma solution : modifier directement le bootstrap.js fichier

vers la ligne 1068, comme suit :

 $(document).on(&#39;click.bs.modal.data-api&#39;, &#39;[data-toggle="modal"]&#39;, function (e) {
    var $this   = $(this)
    var href    = $this.attr(&#39;href&#39;)
    var $target = $($this.attr(&#39;data-target&#39;) || (href && href.replace(/.*(?=#[^\s]+$)/, &#39;&#39;))) //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(&#39;modal&#39;) ? &#39;toggle&#39; : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
    //上边的是原代码，增加了remoteUrl来解决IE下缓存的问题
    var option = $target.data(&#39;modal&#39;) ? &#39;toggle&#39; : $.extend({ remote: remoteUrl }, $target.data(), $this.data())
    e.preventDefault()
    $target
      .modal(option, this)
      .one(&#39;hide&#39;, function () {
        $this.is(&#39;:visible&#39;) && $this.focus()
      })
  })

Copier après la connexion

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 par une et pouvoir prendre en compte chaque navigateur.

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!