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

仅在单击选项卡时从选项卡加载代码

2 个答案: