如何在iframe内锚点点击及每次重载时触发jQuery的updateView函数

Let's fix this issue step by step. The core problem here is that your current event bindings only attach to the initial DOM elements inside the iframe, and when the iframe reloads, those elements get replaced—so the old bindings break. Also, you're listening to a load event on a <div>, which doesn't support that event. Here's how to resolve it:

Key Issues in Your Current Code #

• Event binding loss after iframe reload: When you bind click directly to the initial anchor tags, those elements get replaced when the iframe reloads, so the binding no longer works.
• Incorrect load event target: <div> elements don't fire a load event—you need to listen to the iframe's own load event, which triggers every time the iframe finishes loading content (including initial load and reloads).

Corrected Solution #

We'll listen to the iframe's load event, which will trigger every time the iframe content refreshes. Inside this handler, we'll call updateView (with a small delay to ensure content is fully rendered), and we can also use event delegation for anchor clicks if needed (though the iframe's load event should already cover the reload scenario).

Here's the revised code:

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="adjust_doc_view.js"></script>

jQuery(window).on('load', function () {
  // Function to set up iframe listeners and update view
  function setupIframeHandlers() {
    const iframe = jQuery("div[id^='artifactDiv']").find("iframe[id^='xyz']");
    
    // Listen for the iframe's load event (triggers on initial load AND every reload)
    iframe.on('load', function() {
      // Delay to ensure all iframe content is fully rendered before adjusting
      setTimeout(updateView, 100);
      
      // Optional: If you need immediate click handling (load event covers reloads)
      // Use event delegation on a persistent container inside the iframe
      jQuery(this).contents().find("#allPages").on('click', "a[class^='pagenumber']", function(e) {
        // Add immediate click logic here if needed
        // The iframe will reload after this, triggering the load event above
      });
    });

    // Trigger initial update for the first load
    setTimeout(updateView, 100);
  }

  setupIframeHandlers();
});

Explanation #

1. Listening to the iframe's load event: This event fires every time the iframe finishes loading new content, whether it's the initial page load or a reload triggered by clicking an anchor. This ensures updateView runs after every content change.
2. Event delegation for anchors: Using on('click', 'selector', handler) on the persistent #allPages container (assuming this container doesn't get replaced during reload) ensures that click events are captured even for newly added anchor tags after reloads.
3. Delayed execution: The small setTimeout gives the iframe's content time to fully render before updateView adjusts the widths—this avoids race conditions where the content isn't fully loaded yet when the adjustment runs.

Additional Notes #

• If the #allPages container gets replaced during reloads too, you can delegate to the iframe's body instead: jQuery(this).contents().find("body").on('click', "a[class^='pagenumber']", ...).
• Since clicking an anchor changes the iframe's src and triggers a reload, the iframe's load event will automatically fire afterward—so the updateView call in that handler is sufficient to adjust the view after every page switch.

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