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

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

Особенности проблемы:

Я использую веб-приложение обратной связи uservoice , включая их виджет 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(); };

Ответы [ 2 ]

3 голосов
/ 08 декабря 2009

Я придумал следующий 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 служба поддержки. Этот метод выглядит отлично разумный. У нас нет встроенного методы для этого (в настоящее время мы смотрите на этот тип функциональность), но код, описанный хотя и довольно хакерский, должен сделать свое дело.

1 голос
/ 17 июля 2018

Это будет сделано с помощью 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();
    });     

});
...