页面未刷新时AddThis插件脚本无法加载问题求助

Hey there! I’ve dealt with this exact AddThis quirk before—it’s so annoying when your share toolboxes don’t render until you refresh the page. The good news is this is usually a simple fix related to how AddThis initializes its widgets. Let’s walk through the solutions:

Why This Happens #

AddThis automatically scans your page for its container elements (like div.addthis_inline_share_toolbox) when the script first loads. If your container divs are added after the AddThis script finishes loading (or the DOM isn’t fully ready yet), the plugin never sees them until a refresh.

Solution 1: Manual Initialization on DOM Ready #

If your AddThis divs are static (already in your HTML when the page loads), you just need to trigger AddThis to re-scan the page once the DOM is fully ready. Here’s how:

First, make sure your AddThis script is placed right before the closing </body> tag (this helps avoid DOM readiness issues):

<!-- Place this at the end of your body -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=YOUR_PUB_ID"></script>

Then add this JavaScript to initialize the widgets properly:

// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
  // Check if AddThis is available
  if (window.addthis) {
    // Refresh AddThis layers to detect all containers
    addthis.layers.refresh();
    // Alternatively, you can use addthis.init() to re-initialize the entire plugin
    // addthis.init();
  } else {
    // If AddThis script is still loading, wait for it to finish first
    const addThisScript = document.querySelector('script[src*="addthis_widget.js"]');
    if (addThisScript) {
      addThisScript.onload = function() {
        addthis.layers.refresh();
      };
    }
  }
});

Solution 2: Initialize After Dynamic Div Creation #

If you’re adding AddThis divs dynamically (e.g., via JavaScript, or after an API call), you need to trigger the refresh right after you add the div to the DOM. Here’s an example:

// Create your AddThis container dynamically
const shareToolbox = document.createElement('div');
shareToolbox.className = 'addthis_inline_share_toolbox';

// Add it to your page
document.getElementById('share-container').appendChild(shareToolbox);

// Immediately tell AddThis to render the new widget
if (window.addthis) {
  addthis.layers.refresh();
}

Key Notes #

• Replace YOUR_PUB_ID with your actual AddThis publisher ID (you can find this in your AddThis dashboard).
• Avoid loading the AddThis script multiple times—this can cause conflicts and unexpected behavior.
• If you’re using a framework like React or Vue, run the addthis.layers.refresh() call in the component’s "mounted" or "ready" lifecycle hook (after the component’s HTML is rendered to the DOM).

This should make your AddThis widgets load correctly on the first page load, no refresh required!

内容的提问来源于stack exchange，提问作者Hafez Muhammed