uservoice javascript widget - 如何在页面加载时自动弹出反馈表单

时间:2009-12-07 15:01:34

标签: javascript-events uservoice

在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 未定义”。所以我想在调用时_autoPopupUserVoice()之前没有执行uservoice javascript。

我尝试过其他一些东西,但还没有成功。如何知道加载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 个答案:

答案 0 :(得分:3)

我想出了以下javascript,我在Uservoice小部件代码下放在页面底部。它每100ms循环一次并测试是否定义了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>

我确信有更好的方法可以做到这一点。也许甚至还有一个我不知道的回调函数?

更新(2009年12月8日): Uservoice:

批准此方法
  

感谢您与UserVoice联系   支持。那种方法看起来很完美   合理。我们没有任何内置   这样做的方法(目前,我们   正在看这种类型的   功能)但所描述的代码虽然相当狡猾,但应该这样做。

答案 1 :(得分:1)

这将通过使用jquery完成。除了调用页面,您还可以使用Javascript调用页面加载时的特定部分。您可以找到完整的code and demo here

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

});