点击按钮时如何将page2中的代码加载到page1对应位置？

Got it, let's break down how to solve this problem properly. The main hurdle here is making sure we load the target script in the right position and execute it, while also appending the content as required. Here's a tested approach that handles both requirements:

Step-by-Step Implementation #

Modified Script for page1.html #

Replace your existing click handler with this code:

<script>
$("#load-more").click(function() {
  // Fetch the full content of page2.html
  $.get('page2.html', function(response) {
    // Parse the response into a jQuery object for easy element selection
    const $page2 = $(response);

    // 1. Handle the script with class "scriptthis"
    const $targetScript = $page2.find('script.scriptthis');
    if ($targetScript.length) {
      // Insert the new script right after the last existing "scriptthis" in page1
      const $existingScript = $('script.scriptthis').last();
      if ($existingScript.length) {
        $existingScript.after($targetScript);
      } else {
        // Fallback: if no existing scriptthis, append to the end of body
        $('body').append($targetScript);
      }

      // Execute the script content (critical, since jQuery doesn't auto-run inserted scripts this way)
      // Safer alternative to eval: create a new native script element
      const newScriptEl = document.createElement('script');
      newScriptEl.className = 'scriptthis';
      newScriptEl.textContent = $targetScript.text();
      $('script.scriptthis').last().after(newScriptEl);
      // Remove the original parsed script element to avoid duplicates
      $targetScript.remove();
    }

    // 2. Append page2's #content children to page1's #content
    const $page2Content = $page2.find('#content').children();
    $('#content').append($page2Content);
  });
});
</script>

Key Explanations #

• Fetching Full HTML: Using $.get() instead of .load() lets us access both the script and content parts of page2, since .load() filters out scripts by default or limits what you can extract.
• Script Placement & Execution:
  • We find the script.scriptthis in page2 and insert it immediately after the last existing script.scriptthis in page1 (matching your "near the corresponding script position" requirement).
  • jQuery doesn't automatically execute scripts parsed from HTML strings, so we create a new native script element and inject it—this ensures the code runs, and avoids using eval (a security risk if the script isn't fully trusted).
• Content Appending: We grab only the child elements of page2's #content (not the parent div itself) and append them to page1's #content, so we don't duplicate the container div.

Important Notes #

• Make sure jQuery is properly included in page1 before this script runs.
• If the script from page2 depends on the content being loaded first, adjust the order: append the content before inserting/execute the script.
• For production use, always validate and sanitize content from page2 if it's user-generated, to avoid XSS risks.

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