奇怪的IE，Javascript只能在開發模式下工作（F12）

Question

基本上，我有兩個標簽，一個是隱藏的，一個是顯示的。

隱藏的一個將在后台加載視頻，當前一個完成時，我將通過隱藏顯示的一個來交換兩個。

我還將在服務器端列出可播放的視頻列表，我將使用ajax獲取列表並決定下一個要加載的列表。

無論如何，你很難嘗試這個，因為你需要一個視頻服務器，我發現很難砍掉代碼，所以我只會告訴你整個源代碼（帶一些注釋），希望你能理解。

我使用了jquery和video.js。 源代碼如下，

HTML：

<div class="container" id="video-container-1">
</div>
<div class="container" id="video-container-2">
</div>

使用Javascript：

//I am making a live video by chopping the video into MP4 files of 800ms each
//The play rate has to be adjustable or the local browser and live server will not sync
var play_rate = { 1.0:800, 1.01:790, 1.02:785, 1.03:777, 1.04:770, 1.05:762, 1.06:755, 1.07:748,
  1.08:741, 1.09:734, 1.1:727 };
var min_rate=1.0;
var max_rate=1.1;
var base_rate = 1.03;
var current_rate = base_rate;
var timer_value = play_rate[current_rate];

var key_to_play;
var timer_id;
var newest_key;
var video_server_address = "192.168.100.1:20001";


var current_play = 1;
var container = new Array();
var player = new Array;

function video_html(container_id, id) {
  return '<video id="video-js-' + container_id + '" class="video-js vjs-default-skin" ' +
  ' preload="auto" width="960" height="540"  crossorigin="anonymous" ' +
  'data-setup=\'{"example_option":true}\'>' +
  '\t<source src="http://' + video_server_address +'/live/' + id + '.mp4" type="video/mp4" /> \n' +
  '\t\t<track id="video-vtt" kind="subtitle" label="english" srclang="en" src="http://' + video_server_address + '/live/' + id + '.vtt" default></track>\n ' +
  '\t\t<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>\n' +
  '</video>';
}
function play_next()
{
  var next_play;
  if (current_play == 1)
    next_play = 2;
  else
    next_play = 1;

  player[next_play - 1].play();
  container[next_play - 1].show();
  container[current_play - 1].hide();
  if (player[current_play - 1])
    player[current_play - 1].dispose();

  key_to_play++;

  //switch current & next
  current_play = next_play;

  timer_id = setTimeout(function() {
    play_next();
  }, timer_value);

  //Assuming get list + load video < 700ms
  $.get("http://" + video_server_address + "/live/list", 
    function(list){
      keys = list["keys"];
      newest_key = keys[keys.length - 1];


      console.log("key_to_play: " + key_to_play + "  newest_key: " + newest_key);

      var next_play;
      if (current_play == 1)
        next_play = 2;
      else
        next_play = 1;
      //-----------------begin-------------------
      //not really useful to you because these are just 
      //to let the video play sync with video server, we can safely 
      //remove these but the video play will out of sync after some time    
      if (key_to_play > newest_key)
      {
        //too fast
        //make it slower?
        if (current_rate > min_rate)
        {
          current_rate = current_rate - 0.01;
          timer_value = play_rate[current_rate];
        }
        else
        {
          //it is already 1.0 (the slowest settings)
          //have to crop on the timer_value
          timer_value = play_rate[current_rate] + 5 * (key_to_play - newest_key);
        }
        //either wait or play again? just play again and test for stability first
        key_to_play = newest_key;
      }
      else if (key_to_play == newest_key || key_to_play == newest_key - 1)
      {
        //the best situation we got
        //don't change anything
      }
      else
      {
        //a little slow
        if (current_rate < max_rate)
        {
          current_rate = current_rate + 0.01;
          timer_value = play_rate[current_rate];
        }
        else
        {
          timer_value = play_rate[current_rate] - 5 * (newest_key - key_to_play);
        }

        //tooo slow, drop 4 * 800ms data
        if (newest_key - key_to_play > 5)
        {
          key_to_play = newest_key - 1;
        }
      }
      //-------------------end------------

      container[next_play - 1].html(video_html(next_play, key_to_play));
      player[next_play - 1] = videojs('video-js-' + next_play, {}, function(){
        // Player (this) is initialized and ready.
        //the following is only to make the browser show subtitle
        //without this, the FF will not show subtitle by default
        $('#video-container-' + next_play + " div.vjs-subtitles-button li.vjs-menu-item").eq(1).trigger('click');
      });
      player[next_play - 1].playbackRate(current_rate);



      console.log(timer_value);
    }
  );



}

$( document ).ready(function() {
  $.get("http://" + video_server_address + "/live/list", function(list){
    keys = list["keys"];
    key_to_play = keys[keys.length - 2];
    newest_key = keys[keys.length - 1];

    container[0] = $("div#video-container-1");
    container[1] = $("div#video-container-2");
    container[0].hide();

    container[1].html(video_html(2, key_to_play));
    player[0] = null;
    player[1] = videojs("video-js-2",{}, function(){
      // Player (this) is initialized and ready.
      console.log($("#video-container-2 div.vjs-subtitles-button li.vjs-menu-item").eq(1).text());
      $("#video-container-2 div.vjs-subtitles-button li.vjs-menu-item").eq(1).trigger('click');
    });
    player[1].playbackRate(current_rate);

    play_next();
  });
});
</script>

此代碼在chrome和FF上運行良好，但是，在嘗試使用IE11時，新視頻將無法加載，它將每800毫秒在兩個視頻（例如視頻1和2）之間切換，我認為它將加載后者（3 ，4,5等一個），但它不會播放，它只是繼續播放1和2以及1和2。

當我嘗試調試它時，我打開IE11開發工具，然后當開發工具准備就緒時，IE11將運行良好。

只要我關閉開發工具，IE11就會很糟糕。

我想也許IE11做了一些優化並優化了一些代碼？ 我該怎么檢查？

謝謝。

Answer 1

取自對原始問題的評論：

為什么JavaScript只在IE中打開開發人員工具后才能工作？

對於OP來說，這是他的Ajax請求的緩存導致了這個問題。 通過禁用緩存解決：

$.ajax({cache: false, ...})

Answer 2

正如您使用以下代碼

console.log("key_to_play: " + key_to_play + "  newest_key: " + newest_key);

在這里你應該檢查控制台對象是否存在，當你按F12，它會自動創建控制台對象，你應該這樣寫

if (typeof console == "object") {
    console.log("key_to_play: " + key_to_play + "  newest_key: " + newest_key);
}
else{
    //do nothing`enter code here`
}

Answer 3

這個答案是針對IE中的相同行為（緩存ajkax調用）但使用AngularJS而不是JQuery。 我會在這里發布，這樣可以幫助像我這樣的另一個人。

我們發現IE在某些頁面上效果不佳，除非DevTools（F12）第一次處於活動狀態。 最后，感謝這個問題，我注意到IE正在緩存JS GET調用。 因此，在使用angular時，為了避免這種行為，你應該這樣做：

$httpProvider.defaults.headers.common['If-Modified-Since'] = '0';