如何在iframe加载时滚动到class为grid-container的指定元素？

需求说明 #

当iframe加载完成时，自动滚动到其内部class为grid-container的div元素。

解决方案 #

情况1：iframe与当前页面同域（或你能控制iframe内容）

这种情况下可以直接通过JavaScript操作iframe内部DOM：

1. 给iframe添加唯一ID，方便后续获取元素
2. 监听iframe的load事件，在事件触发后执行滚动逻辑

修改后的iframe代码：

<iframe id="targetIframe" style="position:absolute;border:none;width:100%;height:93%;" src="你的页面地址" allowfullscreen></iframe>

JavaScript代码：

const iframe = document.getElementById('targetIframe');

iframe.addEventListener('load', function() {
  // 尝试获取iframe内部的目标元素
  const gridContainer = iframe.contentDocument.querySelector('.grid-container');
  
  if (gridContainer) {
    // 滚动到目标元素，可通过参数调整滚动效果
    gridContainer.scrollIntoView({
      behavior: 'smooth', // 平滑滚动，换成'auto'则是瞬间跳转
      block: 'center',    // 让元素在视口中居中，可选'start'/'end'
      inline: 'center'
    });
  }
});

情况2：iframe指向外部不同域站点

如果iframe的源地址（比如示例中的https://ovolve.github.io/2048-AI/）和当前页面不同域，浏览器的同源策略会阻止你直接访问iframe内部的DOM元素，这种情况下无法通过前端JavaScript实现该需求。除非你能修改iframe目标页面的代码，让它在自身加载完成后执行滚动逻辑，否则没有可行的前端解决方案。

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