在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(); };
答案 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();
});
});