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 app替换<body>元素的内容。

当shareaholic.js加载了＆＃34; shareaholic-canvas＆＃34; div中不再存在div。

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

<强> 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 share按钮未加载

2 个答案: