uservoice javascript widget - Как автоматически открывать форму обратной связи при загрузке страницы

Question

На странице HTML, как я могу узнать, когда внешне загруженный объект javascript определен и готов для вызова методов на нем?

Специфика проблемы:

Я использую веб-приложение с отзывами пользователей, включая их виджет javascript и опцию SSO (Single-SignOn).

Все отлично работает В левой части окна находится заметная вкладка Обратная связь. И я могу использовать следующий якорь для дополнительных ссылок, чтобы открыть их всплывающий виджет обратной связи:

<a href="#" onclick="UserVoice.Popin.show(uservoiceOptions); return false;">feedback</a>

Но... у меня возникли проблемы при попытке поддержки дополнительного рабочего процесса - на одной конкретной странице (например, на странице обратной связи) я хочу, чтобы форма обратной связи с пользовательским счетом автоматически всплывала, когда пользователь переходит на страницу без инициации с помощью события щелчка.

Я попытался поместить следующее в нижней части страницы:

<script type="text/javascript">
function _autoPopupUserVoice() {
  UserVoice.Popin.show(uservoiceOptions);
}
_loadSuper = window.onload;
window.onload = (typeof window.onload != 'function') ? _autoPopupUserVoice : function() { _loadSuper(); _autoPopupUserVoice(); };
</script>

Но Firebug показывает ошибку " UserVoice не определен". Так что я думаю, что JavaScript пользовательского голоса не был выполнен к тому времени _autoPopupUserVoice() называется.

Я попробовал несколько других вещей, но не смог заставить это работать. Как узнать, когда Uservoice javascript объект загружен и готов для вызова методов на нем?

Для справки объект Uservoice загружается с помощью следующего JavaScript в конце страницы:

<script type="text/javascript">
function _loadUserVoice() {
  var s = document.createElement('script');
  s.setAttribute('type', 'text/javascript');
  s.setAttribute('src', ("https:" == document.location.protocol ? "https://" : "http://") + "cdn.uservoice.com/javascripts/widgets/tab.js");
  document.getElementsByTagName('head')[0].appendChild(s);
}
_loadSuper = window.onload;
window.onload = (typeof window.onload != 'function') ? _loadUserVoice : function() { _loadSuper(); _loadUserVoice(); };

Answer 1

Я придумал следующий javascript, который я поместил внизу страницы под кодом виджета Uservoice. Он зацикливается каждые 100 мс и проверяет, определен ли объект Uservoice. Как только он определен, он вызывает Popin способ всплывающего виджета:

<script type="text/javascript">

// Show the Uservoice feedback widget
function _autoPopupUserVoice() {
    UserVoice.Popin.show(uservoiceOptions);
}

// Wait for the uservoice JS object to load, fire _autoPopupUserVoice when it is finished.
if ((typeof window['UserVoice'] == 'undefined')) {

    var timer = setInterval(function () {
        ok = false;
        try { ok = (typeof window['UserVoice'] != 'undefined');} catch (e) {}

        if (ok) {
            clearInterval(timer);
            _autoPopupUserVoice();
        }
    }, 100);
}
</script>

Я уверен, что есть лучший способ сделать это. Возможно, есть даже функция обратного вызова, о которой я не знаю?

Обновление (8 декабря 2009 г.): этот метод полуутвержден компанией Uservoice:

Спасибо за обращение в службу поддержки UserVoice. Этот метод выглядит вполне разумным. У нас нет встроенных методов для этого (в настоящее время мы смотрим на этот тип функциональности), но код, описанный, хотя и довольно хакерский, должен сработать.

Answer 2

Это будет сделано с помощью jquery. Вместо вызова страницы вы можете вызвать определенный раздел при загрузке страницы, используя Javascript. Вы можете найти полный код и демо здесь:

$(document).ready(function() {  

        var id = '#dialog';

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(500); 
        $('#mask').fadeTo("slow",0.9);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000);     

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });     

});