代码之家 › 专栏 › 技术社区 › Tom

用户语音javascript小部件-如何在页面加载时自动弹出反馈表单

uservoice javascript-events

3

Tom · 技术社区 · 16 年前

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

问题细节:

我正在使用 uservoice 反馈Web应用程序,包括其javascript小部件和SSO( 单信号 )选项。

一切正常。窗口左侧有一个突出的反馈选项卡。我可以使用下面的锚来获取其他链接,以打开它们的弹出式反馈小部件:

<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() 被调用。

我试过其他一些方法,但还没成功。怎么知道什么时候 Uservoice javascript对象已加载并准备好对其调用方法了吗?

作为参考,用户语音对象通过页面末尾的以下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 回复 | 直到 8 年前

1

3

Tom 16 年前

我想到了下面的javascript,它放在页面底部的用户语音小部件代码下面。它每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日): 这种方法是半 -用户语音批准:

感谢您联系用户语音支持。这个方法看起来很完美合理。我们没有内置的方法(目前,我们正在研究这种类型的功能性)但是所描述的代码,即使非常简单,也应该做到这一点。

2

1

M. Lak 8 年前

这将通过使用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();
    });     

});