Firefox下iframe内容为空及无框架实现商品列表返回滚动位置问询

嘿，针对你遇到的这个需求和问题，我来分享下可行的解决方案思路和踩坑经验——毕竟在无状态管理框架的情况下，要实现「列表滚动后跳转详情、返回时回到原位置」确实有不少细节要注意，而Firefox对iframe的处理又有它的特殊之处。

背景回顾：基于Vanilla JS/jQuery的无限商品列表页，需求是向下滚动后点击商品进入详情页，点击浏览器返回按钮时回到列表页原滚动位置；目前已制作POC，通过追加iframe加载详情页内容，但遇到Firefox下iframe内容为空的问题。

一、先搞定「返回列表保持滚动位置」的核心逻辑 #

先把核心需求的实现逻辑理清楚，再解决iframe的兼容性问题：

• 点击商品时，先存储当前滚动位置：
  我们可以用sessionStorage或者history.state来保存滚动值，这里用sessionStorage更稳妥，避免页面刷新后丢失：

  // 列表页商品点击事件
  $('.product-item').on('click', function() {
    // 存储当前窗口滚动距离
    sessionStorage.setItem('listScrollTop', $(window).scrollTop());
    // 后续iframe/AJAX加载详情的逻辑放在这里
  });
  

• 监听浏览器popstate事件，处理返回操作：
  当用户点击返回按钮时，恢复之前存储的滚动位置，并移除详情页相关的容器/iframe：

  window.addEventListener('popstate', function(e) {
    // 识别是从详情页返回的操作
    if (e.state?.fromDetail) {
      // 移除详情页容器/iframe
      $('#detail-iframe, #detail-container').remove();
      // 恢复滚动位置
      const savedScroll = sessionStorage.getItem('listScrollTop');
      if (savedScroll) {
        $(window).scrollTop(parseInt(savedScroll));
      }
    }
  });
  

二、解决Firefox下iframe加载详情页为空的问题 #

Firefox对iframe的渲染时机、安全策略有特殊处理，你可以试试这几个方案：

方案1：监听iframe加载完成后再显示 #

Firefox有时会因为渲染优先级问题导致iframe内容空白，我们可以等iframe完全加载后再插入DOM或者设置显示：

$('.product-item').on('click', function() {
  const detailUrl = $(this).data('detail-url');
  sessionStorage.setItem('listScrollTop', $(window).scrollTop());

  // 先创建隐藏的iframe
  const iframe = $('<iframe>', {
    src: detailUrl,
    id: 'detail-iframe',
    style: 'width:100%;height:100vh;position:fixed;top:0;left:0;z-index:9999;display:none;'
  });

  // 监听加载完成事件，再显示并插入DOM
  iframe.on('load', function() {
    $(this).show();
    $('body').append(this);
    // 修改history状态，让返回按钮能触发我们的逻辑
    history.pushState({ fromDetail: true }, '', detailUrl);
  });
});

方案2：添加sandbox属性（同域场景） #

如果详情页和列表页是同域的，给iframe添加sandbox属性可以规避Firefox的部分安全限制：

const iframe = $('<iframe>', {
  src: detailUrl,
  id: 'detail-iframe',
  sandbox: 'allow-same-origin allow-scripts allow-top-navigation',
  style: 'width:100%;height:100vh;position:fixed;top:0;left:0;z-index:9999;'
});

方案3：放弃iframe，改用AJAX加载详情内容 #

其实iframe不是必须的，用AJAX直接请求详情页HTML插入到全屏容器里，兼容性更好，也更灵活：

$('.product-item').on('click', function() {
  const detailUrl = $(this).data('detail-url');
  sessionStorage.setItem('listScrollTop', $(window).scrollTop());

  // 创建全屏详情容器
  const detailContainer = $('<div>', {
    id: 'detail-container',
    style: 'width:100%;height:100vh;position:fixed;top:0;left:0;z-index:9999;overflow:auto;'
  });
  $('body').append(detailContainer);

  // AJAX请求详情页内容
  $.get(detailUrl, function(html) {
    detailContainer.html(html);
    history.pushState({ fromDetail: true }, '', detailUrl);
  });
});

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