gpt4 book ai didi

javascript - Shareaholic 分享按钮未加载

转载 作者:行者123 更新时间:2023-11-30 16:28:55 26 4
gpt4 key购买 nike

我正在尝试使用 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 作为框架。

最佳答案

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

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

当 shareaholic.js 加载时,dom 中不再存在“shareaholic-canvas”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>

关于javascript - Shareaholic 分享按钮未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33641671/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com