僅在單擊選項卡時才從選項卡加載代碼

Question

我有一系列標簽。 我了解頁面加載后所有選項卡都會加載。 我有一個選項卡，但是我想將其作為例外。 它包含一個我正在加載的小部件，僅當用戶單擊該特定選項卡后才想加載。

 <div class="tabbable tabbable-custom">
  <ul class="nav nav-tabs">
    <li class="active">
      <a id="nav-tabs-2" data-toggle="tab" href="#info">Details</a>
    </li>
    <li>
      <a data-toggle="tab" href="#live">Live View</a>
    </li>
    <li>
      <a data-toggle="tab" href="#local">Local Storage</a>
    </li>
  </ul>
 </div>

然后這是我的標簽

    <div id="local" class="tab-pane">
    <div evercam="localstorage"></div>

    <script type="text/javascript"   src="https://s3.amazonaws.com/cdn.evercam.io/js/localstorage/0.0.1/hikvision.local.storage.mini.js"></script>
  <script type="text/javascript">

    $('a[data-toggle="tab"]').on('click','show.bs.tab', function() {
      if ($(this).attr('href') == '#local' && !LocalStorage.isLoaded()) {
        // Set Evercam Camera ID
        LocalStorage.options.cameraId = '<%= @camera['id'] %>';

        // OR //
        // Using api_id and api_key
        LocalStorage.options.api_id = '<%= current_user.api_id -%>';
        LocalStorage.options.api_key = '<%= current_user.api_key -%>';

        // Finally Load the widget
        LocalStorage.Load();
      }
    })


    </script>
    </div><!--TAB PANE -->

當用戶單擊選項卡時，這將加載小部件。 我遇到的問題是，如果用戶離開選項卡然后返回到它-它會重新加載小部件，而我有兩個小部件實例！ 有什么辦法可以讓它只加載一次嗎？

Answer 1

我不知道您的代碼結構如何，但是似乎可以執行以下操作：

$('a[data-toggle="tab"]').on('click','show.bs.tab', function(e) {
 if ($(e.target).attr('href') == '#local' && !LocalStorage.isLoaded()) {
 // Set Evercam Camera ID
 LocalStorage.options.cameraId = '<%= @camera['id'] %>';

 // OR //
 // Using api_id and api_key
 LocalStorage.options.api_id = '<%= current_user.api_id -%>';
 LocalStorage.options.api_key = '<%= current_user.api_key -%>';

 // Finally Load the widget
 LocalStorage.Load();
 }
});

因此，如果單擊了右選項卡並且加載了小部件，它將同時考慮兩者

更新

好吧，那里有點誤會了。

$('a[data-toggle="tab"]').on('click', function(e) {
   // Check if the clicked tab is the right one
   // Also check if the widget is loaded
   if ($(this).attr('href') == '#local' && !LocalStorage.isLoaded()) {
     // Set Evercam Camera ID
     LocalStorage.options.cameraId = '<%= @camera['id'] %>';

     // OR //
     // Using api_id and api_key
     LocalStorage.options.api_id = '<%= current_user.api_id -%>';
     LocalStorage.options.api_key = '<%= current_user.api_key -%>';

     // Finally Load the widget
     LocalStorage.Load();
  }
 });

我不知道您的LocalStorage對象如何工作，它是第三方庫嗎？ 是你自己的嗎？ 如果是前者，他們可能有一種檢查實例是否正在運行的方法。 如果是后者，您可以做

LocalStorage.prototype.isLoaded = function() {
  //Here you write code to check if there is a running instance of the widget loaded
  return this.widget !== undefined
}

或者您可以簡單地以僅允許一個實例運行的方式編寫Load函數

（刪除'show.bs.modal'參考。這是引導程序在顯示選項卡時觸發的事件，與單擊http://getbootstrap.com/javascript/#tabs無關）

Answer 2

檢查這個fiddle ，希望它會結束這個問題:)。

修復localStorage問題： Fiddle2