Shareaholic 分享按钮未加载

Question

我正在尝试使用 http://www.shareaholic.com 中的共享按钮，但在异步加载元素上加载按钮时遇到问题。首先，以下代码在静态页面上工作。

<html>
  <head>
    <script type='text/javascript' 
            src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js' 
            data-shr-siteid='000000000000000000000000000000000' 
            data-cfasync='false' 
            async='async'>
    </script>
  </head>
  <body>
    <! -- this loads fine -->
    <div class='shareaholic-canvas' data-app='share_buttons' data-app-id='99999999'></div>
  </body>
</html>

但是如果有一个异步加载的元素，它不会加载共享按钮。

##### index.html ######
<html>
  <head>
    <script type='text/javascript' 
            src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js' 
            data-shr-siteid='000000000000000000000000000000000' 
            data-cfasync='false' 
            async='async'>
    </script>
  </head>
  <body>
    <!-- this section gets loaded after index.html loaded -->
    <blog-content></blog-content>
  </body>
</html>

##### blog-content.html #####
<template>
  <!-- some blog content here -->
  <div class='shareaholic-canvas' data-app='share_buttons' data-app-id='99999999'></div>
</template>

我猜这是因为部分在部分完成加载之前就已执行，但我不确定处理这种情况的最佳方法是什么。我正在使用 Aurelia.js 作为框架。

Answer 1

加载 shareaholic.js 的脚本标记具有 async 属性，因此它将异步执行并且不会阻止页面加载的其余部分。

虽然 shareaholic.js 正在加载 aurelia 有机会启动并用 aurelia 应用程序替换 <body> 元素的内容。

在 shareaholic.js 加载时 "shareaholic-canvas" div 不再存在于 dom。

您可以尝试像这样创建一个共享狂自定义元素：

shareaholic.html

<template>
  <script type='text/javascript' 
          src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js' 
          data-shr-siteid='000000000000000000000000000000000' 
          data-cfasync='false' 
          async='async'>
  </script>
  <div class='shareaholic-canvas' data-app='share_buttons' data-app-id='99999999'></div>
</template>

然后像这样使用自定义属性：

app.html

<template>
  <require from="shareaholic.html"></require>

  <shareaholic></shareaholic>
</template>

Answer 2

<html>
  <head>
    <script type='text/javascript' 
            src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js' 
            data-shr-siteid='000000000000000000000000000000000' 
            data-cfasync='false' 
            async='async'>
    </script>
  </head>
  <body>
    <! -- this loads fine -->
    <div class='shareaholic-canvas' data-app='share_buttons' data-app-id='99999999'></div>
  </body>
</html>

Shareaholic 分享按钮未加载

shareaholic share buttons not loading

html

javascript

aurelia