Bootstrap 模式内容正在 Internet Explorer 中缓存

Question

我有一个 Bootstrap 页面，除其他外，允许用户打开 "add event" 模式，在文本区域中输入一些文本并提交。当用户打开模式 window 文本区域需要预先填充最近输入的文本，因为大多数时候他们只需要修改它。

一旦用户输入文本并单击提交按钮，它会调用 ajax 来保存新文本并动态替换父屏幕上的相关文本部分，然后隐藏模态 (即全部不刷新父页面）。

这一切正常，直到有人在模式中输入一些新文本并提交它。问题是，如果用户随后再次重新打开相同的模式，则会显示原始文本，而不是最新的文本。

根据我的测试，这种情况发生在 IE9 中，但 Chrome 没有，因此这似乎是某种类型的缓存问题。我尝试了各种建议，例如 $('#your-modal').removeData('bs.modal');尝试清除隐藏的模式缓存，但似乎没有任何效果。

我使用的代码示例是：

Link

<a href="EventAdd_Form.cfm?<cfoutput>#GetRequiredParams()#&amp;eventType=background</cfoutput>" data-target="#addEventModal" data-toggle="modal" class="btn btn-primary btn-sm btn-openModal" title="Add a background"><span class="glyphicon glyphicon-plus"></span> Add</a>

父页面上的模态标记

<!--- Add new event modal --->
<div class="modal modal-wide" id="addEventModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <!--- Content dynamically generated --->
  </div>
</div>

EventAdd_Form.cfm（加载到模态）

<cfset data = GetData(URL.param1, URL.param2, userType)>

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
  <cfoutput>
    <!--- Main form --->
    <form name="addEventForm" id="addEventForm" role="form" method="get" action="EventAdd_Action.cfm">

      <div class="form-group">
        <textarea name="eventText" id="eventText" class="form-control textarea-animate" rows="6" maxlength="1000"
          data-bv-notempty="true" 
          data-bv-notempty-message="Please enter some text to continue"
          data-bv-stringlength="true"
          data-bv-stringlength-max="1000"
          data-bv-stringlength-message="You have exceeded the maximum number of characters for this field">#data#</textarea>     
      </div>    

      <button type="submit" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-ok"></span> Submit</button>

    </form>
    <!--- /Main form --->
  </cfoutput>
</div>

JQuery 在显示 addEvent 模式时运行

$('#addEventModal').on('shown.bs.modal', function(){
    $('form').bootstrapValidator().on('success.form.bv', function(e){
    e.preventDefault();

    $.ajax({
      type: 'GET',
      cache: false,
      url: 'EventAdd_Action.cfm?<cfoutput>#GetRequiredParams()#</cfoutput>&eventType=' + thisEventType + '&eventText=' + encodeURIComponent(thisEventText) + '&userType=' + thisUserType,
      success: function(response){ 
        //Hide the modal window 
        $('#addEventModal').modal('hide');

        ...Do some other stuff here - update the text on the parent window etc...
  });
}

任何关于为什么将其缓存在 IE 中的想法都将不胜感激。

我正在使用Bootstrapcss版本3.3.2和js版本3.2.0。

Answer 1

IE 会像任何其他浏览器一样尝试缓存所有内容。由于您已经有 cache : false，因此猜测可能是 IE 会首先处理触发 ajax 调用的 href，最终

<a href="EventAdd_Form.cfm?<cfoutput>#GetRequiredParams()#&amp;eventType=background</cfoutput>" data-target="#addEventModal" data-toggle="modal" class="btn btn-primary btn-sm btn-openModal" title="Add a background"><span class="glyphicon glyphicon-plus"></span> Add</a>

尝试在每次 ajax 成功后更改 <a> 标签上的 href。首先给它一个 id, test - 然后，在 dom 准备好保存原始渲染的 href 并创建一个 counter :

$(document).ready(function() {
   var href = $('#test').attr('href'),
       counter = 1;
})

在您的成功处理程序中：

success: function(response){ 
        //Hide the modal window 
        $('#addEventModal').modal('hide');
        counter++; 
        $('#test').attr('href', href+'&noCache='+counter);

完全没有测试，我现在使用的机器上没有 IE - 但它肯定会减少 IE 缓存模态内容的借口数量。

Answer 2

根据 David 的建议，这就是我最终做的事情：

$('.btn-openModal').click(function(e){
    $(this).attr("href", function(_, val){
      return val.replace(/(nocache=)[0-9]+/, 'nocache=' + new Date().getTime());
    });
});

它只是在用户每次点击 link 时用新的时间值替换 URL 中的 "nocache" 参数，这使得 IE 更新模态的内容。

Bootstrap 模式内容正在 Internet Explorer 中缓存

Bootstrap modal content being cached in Internet Explorer

jquery

internet-explorer

bootstrap-modal

twitter-bootstrap-3