3

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

问题细节：

我正在使用用户语音反馈 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 显示错误：

“未定义用户语音”。

所以我猜用户语音 Javascript 在被调用时还没有被执行_autoPopupUserVoice()。

我尝试了其他一些事情，但没有设法让它工作。如何知道UservoiceJavascript 对象何时加载并准备好对其调用方法？

作为参考，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(); };
4

2 回答 2

3

我想出了以下 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 支持。这种方法看起来非常合理。我们没有任何内置的方法可以做到这一点（目前，我们正在研究这种类型的功能），但描述的代码虽然很老套，但应该可以解决问题。

于 2009-12-08T14:32:47.763 回答
1

这将通过使用 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();
    });     
    
});
于 2018-07-17T10:52:50.597 回答