iFrame交互后页面滚动位置自动恢复教程：利用URL变化监听与自定义事件

window.onload = function() {
  var iframe = document.querySelector("#iframe iframe"); // 假设iFrame在ID为"iframe"的容器内

  // 页面加载时尝试从URL哈希恢复滚动位置
  var scrollPosition = getScrollPositionFromUrl();
  if (scrollPosition) {
    window.scrollTo(0, scrollPosition);
  }

  // 监听iFrame加载事件，尝试移除URL中的滚动位置信息
  iframe.addEventListener("load", function() {
    removeScrollPositionFromUrl();
    console.log("Iframe reloaded");
  });

  // ... (getScrollPositionFromUrl, setScrollPositionToUrl, removeScrollPositionFromUrl 函数定义)
};

<script>
  // 定义需要匹配的常见URL模式数组
  var commonUrlPatterns = [
    "/?step=index/step3",
    "/?step=index/step2/show"
    // 根据实际业务需求添加更多模式
  ];

  // 存储页面初始URL和当前URL
  var initialUrl = window.location.href;
  var currentUrl = initialUrl;

  /**
   * 获取当前页面的完整URL
   * @returns {string} 当前URL字符串
   */
  function getCurrentURL() {
    return window.location.href;
  }

  /**
   * 滚动到指定选择器对应的元素
   * @param {string} targetSelector 目标元素的CSS选择器（例如：'#iframe'）
   */
  function scrollToSection(targetSelector) {
    var targetElement = document.querySelector(targetSelector);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到视图
    }
  }

  /**
   * 检查URL是否发生变化，并根据模式匹配执行滚动
   */
  function checkURLChange() {
    var previousUrl = currentUrl; // 保存上一次的URL
    currentUrl = getCurrentURL(); // 获取当前的URL

    // 如果URL发生变化
    if (currentUrl !== previousUrl) {
      // 检查当前URL是否匹配任何预设模式
      var matchedPattern = commonUrlPatterns.find(function (pattern) {
        return currentUrl.includes(pattern);
      });

      // 如果找到匹配的模式，则滚动到iFrame区域
      if (matchedPattern) {
        scrollToSection("#iframe"); // 假设iFrame容器的ID是"iframe"
      }
    }
  }

  // 页面初始加载时，也需要检查一次URL是否匹配，并执行滚动
  var matchedInitialPattern = commonUrlPatterns.find(function (pattern) {
    return initialUrl.includes(pattern);
  });
  if (matchedInitialPattern) {
    scrollToSection("#iframe");
  }

  // 设置定时器，每隔1000毫秒（1秒）检查一次URL变化
  setInterval(checkURLChange, 1000); 
</script>

<script>
  // 定义一个用于监听自定义事件的元素，这里使用body
  const eventListenerElement = document.querySelector("body");
  // 假设iFrame容器的ID是"targetId"
  const scrollTargetSelector = "#targetId"; 
  // 假设需要匹配的URL模式（如果hashchange不足以覆盖所有场景，可以结合使用）
  const urlPatternToMatch = "/?step=index/step3"; 

  // 创建自定义事件时携带的详细信息
  // 这里可以根据需要传递任何数据，例如滚动目标选择器和URL模式
  const eventDetails = {
    scrollTarget: scrollTargetSelector,
    pattern: urlPatternToMatch 
  };

  // 创建一个名为 "scrollToIframeSection" 的自定义事件
  const customScrollEvent = new CustomEvent("scrollToIframeSection", {
    detail: eventDetails // 附加自定义数据
  });

  /**
   * 滚动到指定元素的函数
   * @param {HTMLElement} targetElement 目标DOM元素
   */
  function scrollToSection(targetElement) {
    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: "smooth"
      });
    }
  }

  /**
   * 自定义事件处理函数
   * 当 "scrollToIframeSection" 事件被触发时执行
   * @param {CustomEvent} ev 触发的自定义事件
   */
  function customEventHandler(ev) {
    const targetSelector = ev.detail.scrollTarget;
    const scrollTargetElement = document.querySelector(targetSelector);
    if (scrollTargetElement) {
        scrollToSection(scrollTargetElement);
    }
  }

  // 监听自定义事件
  eventListenerElement.addEventListener("scrollToIframeSection", customEventHandler, false);

  // 监听浏览器URL哈希变化事件
  window.addEventListener('hashchange', function() {
    // 当URL的哈希部分改变时，触发自定义事件
    // 在实际应用中，你可能需要在此处添加逻辑，
    // 检查新的哈希是否符合特定条件，再决定是否触发滚动。
    // 例如：if (window.location.hash.includes("step3")) { ... }
    eventListenerElement.dispatchEvent(customScrollEvent);
  });

  // 页面加载时检查一次URL是否匹配模式并触发滚动
  function checkInitialURLAndScroll(pattern, targetSelector) {
    const currentUrl = window.location.href;
    if (currentUrl.includes(pattern)) {
      const targetElement = document.querySelector(targetSelector);
      if (targetElement) {
        scrollToSection(targetElement);
      }
    }
  }
  // 页面加载时执行初始检查
  checkInitialURLAndScroll(urlPatternToMatch, scrollTargetSelector);
</script>

<!-- 示例HTML结构，假设你的iFrame容器ID为"targetId" -->
<div style="height: 100vh; background-color: #f0f0f0;">页面顶部内容</div>
<div id="targetId" style="height: 50vh; background-color: #e0e0e0; border: 1px solid blue;">
  <!-- 你的iFrame将放置在这里 -->
  <p>这是iFrame容器，滚动目标</p>
  <iframe src="about:blank" style="width: 100%; height: 80%; border: none;"></iframe>
</div>
<div style="height: 100vh; background-color: #f0f0f0;">页面底部内容</div>