优化内嵌Iframe页面重载后的滚动位置：从URL监控到事件驱动方案

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

  // 获取当前URL的辅助函数
  function getCurrentURL() {
    return window.location.href;
  }

  // 存储初始URL
  var initialUrl = getCurrentURL();

  // 存储当前URL，用于与上一次URL进行比较
  var currentUrl = initialUrl;

  // 检查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);
      });

      if (matchedPattern) {
        // 如果匹配成功，则滚动到Iframe容器
        scrollToSection("#iframe");            
      }
    }
  }

  // 滚动到指定元素的函数
  function scrollToSection(targetSelector) {
    var targetElement = document.querySelector(targetSelector);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动
    }
  }

  // 页面加载时，检查初始URL是否匹配模式，如果匹配则滚动
  var matchedInitialPattern = commonUrlPatterns.find(function (pattern) {
    return initialUrl.includes(pattern);
  });

  if (matchedInitialPattern) {
    scrollToSection("#iframe");     
  }

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

<style>
  /* 仅为示例创建一些空间 */
  body {
    font-size: 16px;
    margin: 0;
    padding: 0;
  }
  .bigger-is-me {
    height: 100vh; /* 确保有足够的滚动空间 */
    border: solid 1px #FF0000;
    margin-bottom: 1em;
  }
  .fun-guy {
    margin-bottom: 5em;
  }
</style>

<div class="bigger-is-me"> I just create some space to test</div>
<div id="targetId" class="fun-guy">I am the target, could be the iframe</div>

<script>
  // 定义要附加事件的元素和滚动目标
  const attachTo = 'body'; // 可以是任何元素，这里选择body作为事件派发者
  const targetEventElement = document.querySelector(attachTo);

  // 定义自定义事件的详细信息，包括匹配模式和滚动目标
  const details = {
    // pattern: "/?step=index/step3", // 实际应用中可以匹配URL模式
    seeme: "#targetId" // 滚动目标的选择器，例如Iframe容器的ID
  };

  // 创建一个名为 "scrollToSomething" 的自定义事件
  const customEventScroll = new CustomEvent("scrollToSomething", {
    detail: details // 传递事件详情
  });

  // 滚动到指定元素的函数
  function scrollToSection(targetElement) {
    targetElement.scrollIntoView({
      behavior: "smooth" // 平滑滚动
    });
  }

  // 自定义事件的处理函数
  function customEventHandler(ev) {
    const scrollTarget = document.querySelector(ev.detail.seeme);
    if (scrollTarget) {
      scrollToSection(scrollTarget);
    }
  }

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

  // 监听URL哈希变化事件
  window.addEventListener('hashchange', function() {
    // 当哈希变化时，派发自定义事件
    targetEventElement.dispatchEvent(customEventScroll);
  });

  // 页面加载时检查URL是否匹配模式并派发事件（如果需要）
  // 这里的checkURLMatch函数仅为示例，实际应用中可以根据URL模式判断
  function checkURLMatch(pattern) {
    const currentUrl = window.location.href;
    // 假设这里有一个逻辑来判断当前URL是否需要滚动
    // 例如：if (currentUrl.includes(pattern)) { ... }
    // 为了示例，我们直接派发事件
    targetEventElement.dispatchEvent(customEventScroll);
  }

  // 页面加载时立即执行一次检查并派发事件，确保初始状态正确
  // 这里的pattern可以从页面数据中获取或硬编码
  checkURLMatch(details.pattern || ''); // 示例中传入空字符串或实际模式
</script>