Загрузка кода с вкладки только при нажатии на вкладку

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

Ok, получил немного ошибся там.

$('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 объект, является его thrid библиотека партия? Это ваше собственное? Если первое, у них, вероятно, есть способ проверить, есть ли запущенный экземпляр. В последнем случае, вы могли бы сделать только

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' ссылку. Это событие уволен bootstrap, когда вы показываете вкладку, это не имеет никакого отношения к щелчку http://getbootstrap.com/javascript/#tabs)

Answer 2

отметьте это fiddle, я надеюсь, что это закончит этот вопрос :).

Устранить проблему LocalStorage: Fiddle2