SweetAlert2 Modal已加载后加载脚本

发布于 2025-02-05 02:24:13 字数 873 浏览 3 评论 0原文

我正在使用 shareThis 共享按钮生成器，它通过寻找社交媒体共享按钮来使社交媒体共享按钮类sharethis-inline-inline-share buttons。问题在于，我需要渲染SweetAlert2 Modal内部的共享按钮，该按钮是动态生成的，并且不像大多数模态解决方案一样在页面上作为标记存在。这意味着任何sharethis-inline-inline-share-buttons我都尝试将SweetAlert2模式放置在SheetAlert2 Modal中，而ShareThis插件正在寻找它。

尽管它提供了一个不错的插件，但ShareThis网站上登录的体验却很糟糕，而SweetAlert 2似乎在其API中没有提供任何内容，可以将脚本连接到 之前， 已经生成了模态。

这是我目前用来触发SweetAlert2的代码：

shareText = `Share this website:
<br>
<div class="share-container">
<div class="sharethis-inline-share-buttons"></div>
</div>`;

modal.fire({
    titleText: "Spread the word",
    html: shareText,
    icon: "info",
    backdrop: `rgba(0,0,0,0.7)`
});

我想要什么？

原文

I'm using the ShareThis share button generator, which renders social media share buttons by looking for a class sharethis-inline-share-buttons. The problem is that I need to render the share buttons inside of a SweetAlert2 modal, which are dynamically generated and don't exist as markup on the page like most modal solutions. This means that any sharethis-inline-share-buttons class I try to place inside a SweetAlert2 modal doesn't exist at the time that the ShareThis plugin looks for it.

While it provides a decent plugin the logged-in experience on the ShareThis site is terrible, and SweetAlert 2 doesn't seem to offer anything in its API to hook a script into before the modal has been generated.

Here is the code I'm currently using to trigger SweetAlert2:

shareText = `Share this website:
<br>
<div class="share-container">
<div class="sharethis-inline-share-buttons"></div>
</div>`;

modal.fire({
    titleText: "Spread the word",
    html: shareText,
    icon: "info",
    backdrop: `rgba(0,0,0,0.7)`
});

Is what I want possible?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青柠芒果 2025-02-12 02:24:13

我决定联系ShareThis支持，以查看是否只有在加载SweetAlert 2后才可以加载其共享按钮。在收到他们的答复之前，我已经想出了一个主要工作的解决方案，但是我本可以等待一天左右的回答，因为他们不仅用一行代码解决了问题，而且他们还花了一些时间来研究SweetAlert 2的文档以确定应该如何实施（向Enrique大喊大叫Sharethis团队）。

解决方案是使用SweetAlert 2的didopen或didrender函数，该功能允许在模态被同步或异步渲染后执行功能。从那里手动初始化共享按钮是一个简单的问题。

modal.fire({
    titleText: "Spread the word",
    html: shareText,
    icon: "info",
    backdrop: `rgba(0,0,0,0.7)`,
    didOpen: function () {
        window.__sharethis__.initialize();
    }
});

I decided to contact ShareThis support to see if it was possible to load their Share Buttons only once SweetAlert 2 had been loaded. I had figured out a mostly working solution before receiving their reply, but I could have just waited a day or so for them to respond because they not only fixed the problem with a single line of code, they also took the time to look into SweetAlert 2's documentation to determine how it should be implemented (shoutout to Enrique over at the ShareThis team).

The solution is to use SweetAlert 2's didOpen or didRender functions, which allow for the execution of a function after the modal has been synchronously or asynchronously rendered, respectively. From there it's a simple matter of manually initialising the Share Buttons.

modal.fire({
    titleText: "Spread the word",
    html: shareText,
    icon: "info",
    backdrop: `rgba(0,0,0,0.7)`,
    didOpen: function () {
        window.__sharethis__.initialize();
    }
});

回复收藏 0 原文

~没有更多了~