我正在开发的网站上有一些小部件,我从 JavaScript 文件异步加载它们,因此它不会阻止 DOM 完成。
例如,我使用 Digg 和 Buzz 小部件执行此操作,效果很好:
// Buzz Share
function buzzShare() {
$jQ('.sharebox').append('<div class="widget"><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a></div>');
$jQ.getScript('http://www.google.com/buzz/api/button.js');
}
// Digg Share
function diggShare() {
$jQ('.sharebox').append('<div class="widget"><a class="DiggThisButton DiggMedium"></a></div>');
$jQ.getScript('http://widgets.digg.com/buttons.js');
}
当涉及新的 Google +1 小部件时,相同的逻辑不起作用:
// PlusOne Share
function plusOneShare() {
$jQ.getScript('http://apis.google.com/js/plusone.js');
$jQ('.sharebox').append('<div class="widget"><div class="g-plusone" data-size="tall" data-count="true"></div></div>');
}
我尝试同时使用 HTML5 标签和 <g:plusone></g:plusone>
。两者都不起作用。
以下是刚刚启动的服务的文档:http://code.google.com/apis/+1button/
我还注意到,如果将脚本直接嵌入到 HTML 中,您可以执行以下操作。
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
有没有办法使用 {"parsetags": "explicit"}
jQuery 参数 .getScript
?
附注我还尝试在 plusOneShare 函数中切换第一行和第二行,但这也不起作用。
谢谢!
最佳答案
您使用什么浏览器?以下整页示例适合我:
<html>
<head>
<title>jQuery Dynamic load test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getScript('https://apis.google.com/js/plusone.js');
$('.sharebox').append('<div class="widget"><div class="g-plusone" data-size="tall" data-count="true"></div></div>');
});
</script>
</head>
<body>
Hello world!
<div class="sharebox"></div>
</body>
</html>
关于jquery - 异步加载 Google +1 小部件时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6207815/