在页面重新加载时滚动到包含 iframe 的第二部分时出现问题

问：

我有一个网站，我使用的是第三方公司的 iframe。iframe 放置在 ID 为“iframe”的 div 中。我面临的问题是，当用户单击它中的任何按钮时，它会重新加载我的整个页面，滚动位置会重置为顶部。因此，用户需要再次向下滚动才能看到更新的内容，这并不理想。此外，用户甚至不会怀疑发生了什么事，因为 iframe 被放置在网站的第二部分。iframe

我尝试使用 JavaScript 在完成加载后滚动到包含 iframe 的第二部分。但是，到目前为止，我还没有成功。

我不确定这是否是正确的方法。我尝试使用此代码（它是由其他人提供的）。但是在重新加载 iFrame 后，新位置设置为“0”：

    Saved scroll position: 0
    Iframe reloaded

可能代码必须仅在 中舔一舔时触发，链接在开始时有一些共同的模式。iFrame

这是我当前使用的代码：

window.onload = function() {
  var iframeContainer = document.getElementById("iframe");
  var iframe = iframeContainer.querySelector("iframe");
  var iframeSrc = iframe.getAttribute("src");

  console.log("Page loaded");

  // Check if there is a stored scroll position in the URL and restore it
  var scrollPosition = getScrollPositionFromUrl();
  if (scrollPosition) {
    window.scrollTo(0, scrollPosition);
    console.log("Restored scroll position:", scrollPosition);
  }

  // Save the scroll position in the URL when the user scrolls
  window.addEventListener("scroll", function() {
    var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    setScrollPositionToUrl(scrollPosition);
    console.log("Saved scroll position:", scrollPosition);
  });

  // Modify the iframe code to remove scroll position from the URL on reload
  iframe.addEventListener("load", function() {
    removeScrollPositionFromUrl();
    console.log("Iframe reloaded");
  });

  // Function to retrieve scroll position from URL
  function getScrollPositionFromUrl() {
    var hash = window.location.hash;
    if (hash) {
      var scrollPosition = parseInt(hash.substring(1));
      if (!isNaN(scrollPosition)) {
        return scrollPosition;
      }
    }
    return null;
  }

  // Function to set scroll position to URL
  function setScrollPositionToUrl(scrollPosition) {
    var hash = "#" + scrollPosition;
    history.replaceState(null, null, hash);
  }

  // Function to remove scroll position from URL
  function removeScrollPositionFromUrl() {
    history.replaceState(null, null, window.location.pathname);
  }
};

我将不胜感激有关如何解决此问题的任何帮助。如何确保页面在完成加载后自动滚动到包含 iframe 的第二部分？提前感谢您的帮助！

更新

我简化了方法：尝试检查 URL 是否包含通用模式，然后相应地操作滚动位置（使用哈希链接）。但是，此方法并不一致，并且在重新加载页面后无法正确恢复滚动位置。

重要的是，我发现当单击iframe中的链接时，主页不会完全重新加载。因此，在 iFrame 重新加载后，主页的 URL 会更新为新地址，并且滚动将我带到顶部。因此，当 URL 更改时，我实现的代码没有机会执行。

这是我尝试过的：

window.addEventListener("load", function() {
  var iframeContainer = document.getElementById("iframe");
  var iframe = iframeContainer.querySelector("iframe");
  var commonUrlPattern = "/?step=index/step3"; // Update the common URL pattern as needed

  console.log("Page loaded");

  // Check if the URL contains the common pattern and the iframe has loaded
  if (window.location.href.includes(commonUrlPattern)) {
    console.log("Common URL pattern found");
    scrollToSection();
  }

  // Function to scroll to the custom section
  function scrollToSection() {
    // Replace 'section-id' with the actual ID of the section you want to scroll to
    var sectionId = "section-id";
    var sectionElement = document.getElementById(sectionId);
    if (sectionElement) {
      sectionElement.scrollIntoView({ behavior: "smooth" });
    }
  }

  // Listen for iframe load event to track URL changes within the iframe
  iframe.addEventListener("load", function() {
    console.log("Iframe loaded");
    var iframeUrl = iframe.contentWindow.location.href;
    if (iframeUrl.includes(commonUrlPattern)) {
      console.log("Common URL pattern found within iframe");
      scrollToSection();
    }
  });
});

@Mark Schultheiss 提供了建议，但基于它，此代码可以工作：

<script>
  // Define the common URL patterns to match against
  var commonUrlPatterns = [
    "/?step=index/step3",
    "/?step=index/step2/show"
    // Add more patterns as needed
  ];

  // Function to get the current URL
  function getCurrentURL() {
    return window.location.href;
  }

  // Store the initial URL
  var initialUrl = getCurrentURL();

  // Store the current URL
  var currentUrl = initialUrl;

  // Function to check for URL changes
  function checkURLChange() {
    // Get the previous URL
    var previousUrl = currentUrl;

    // Get the current URL
    currentUrl = getCurrentURL();

    if (currentUrl !== previousUrl) {
      // Check if the URL matches any of the common patterns
      var matchedPattern = commonUrlPatterns.find(function (pattern) {
        return currentUrl.includes(pattern);
      });

      if (matchedPattern) {
        // Perform the desired action based on the matched pattern
                  
            scrollToSection("#iframe");            
        
      }
    }
  }

  // Function to scroll to a specific section
  function scrollToSection(targetSelector) {
    var targetElement = document.querySelector(targetSelector);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: "smooth" });
    }
  }

  // Check if the initial URL matches any of the common patterns
  var matchedInitialPattern = commonUrlPatterns.find(function (pattern) {
    return initialUrl.includes(pattern);
  });

  if (matchedInitialPattern) {
    // Perform the desired action based on the matched pattern
         
        scrollToSection("#iframe");     
    
  }

  // Periodically check for URL changes
  setInterval(checkURLChange, 1000); // Adjust the interval as needed (in milliseconds)
</script>