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

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();
 }
});

因此，如果单击了右选项卡并且加载了窗口小部件，则将同时考虑这两者

UPDATE

好，那里有些误会。

$('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，希望它会结束这个问题:)。

解决了本地存储问题：fiddle

Answer 3

[[在此处输入链接描述] [1]

[[1]：Fiddle2 enjfneufjifjjdfinfdjihnfsdifdidk anymoroooooooooooeoeooeokijnddfn dsjnjdfsjdfjkndkjnjfdkdsj bdjbdsbgsdflndsfndlkbg g kdsj jddgsj]