如何在Meteor应用程序中插入addthis共享按钮？通常,您只需将提供的代码直接复制到html文件中即可:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=silencing"></script>
<!-- AddThis Button END -->
但在Meteor中,按钮不会出现.链接似乎从DOM中消失了.这是完整的Meteor应用程序(.js和.css文件是空白的):
<head>
<title>test-addthis</title>
</head>
<body>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=silencing"></script>
<!-- AddThis Button END -->
</body>
这是一个显示问题的实时版本:http://testaddthismeteor.meteor.com/
Meteor模板中的body标签实际上不是HTML正文标记.它只是您应用程序的"主体".
因此,当Meteor加载您的应用程序时,它将生成HTML元素以在浏览器中呈现页面,然后呈现任何适用的模板.在您的情况下,您有一个包含脚本标记的模板,您的假设是,与标准HTML文档一样,浏览器将继续执行相关的Javascript.但是,这不是它的工作原理.Javascript没有被执行,DOM节点只是被附加到DOM结构.
您可以通过尝试记录值来测试addthis_config它 - 它将是未定义的.您尝试包含的addthis脚本也未被浏览器选中,因为Web Inspector中的"资源"选项卡将指示该脚本.
为了解决这个问题,您需要告诉Meteor获取外部脚本然后设置变量.在模板的<head>元素中,添加脚本:
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=silencing"></script>
然后在Javascript中声明变量:
if (Meteor.isClient) {
var addthis_config = {"data_track_addressbar": true};
}
| 归档时间： |
|
| 查看次数： |
2364 次 |
| 最近记录： |