Uservoice Javascript 小部件 - 如何在页面加载时自动弹出反馈表答案

【问题标题】：Uservoice Javascript widget - How to popup feedback form automatically on page loadUservoice Javascript 小部件 - 如何在页面加载时自动弹出反馈表
【发布时间】：2009-12-07 15:01:34
【问题描述】：

在 HTML 页面中，我如何知道何时定义了外部加载的 Javascript 对象并准备好对其调用方法？

问题细节：

我正在使用 uservoice 反馈 Web 应用程序，包括他们的 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 显示错误：

“用户语音未定义”。

所以我猜想在调用 _autoPopupUserVoice() 时用户语音 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(); };

【问题讨论】：

标签： javascript dom-events uservoice

【解决方案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>

我确信有更好的方法来做到这一点。也许还有一个我不知道的回调函数？

更新（2009 年 12 月 8 日）： 此方法已半-得到 Uservoice 的认可：

感谢您联系 UserVoice 支持。这种方法看起来很完美合理的。我们没有任何内置这样做的方法（目前，我们正在看这种类型的功能），但描述的代码虽然很老套，但应该可以解决问题。

【讨论】：

【解决方案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();
    });     
    
});

【讨论】：