如何实现点击按钮刷新页面同时自动将iframe滚动至底部

首先需要明确前提：你的主页面和iframe加载的page1.php必须是同域名同端口同协议的，这是浏览器的同源安全策略限制，跨域场景下无法通过JS操作iframe内部滚动行为。

第一步：修正现有代码的语法问题 #

你原有代码存在多处不规范写法，修正后如下，同时做了体验优化：

<h3>"words and stuff"</h3>
<div class="demo">
  <iframe 
    src="page1.php" 
    width="400" 
    height="400" 
    scrolling="yes" 
    style="font-family: 'Courier New', 'Lucida Console', monospace;"
    name="myIframe"
    id="myIframe"
    class="demo"
  ></iframe>
</div>  

<form method="post" action="page2.php" target="myIframe">
  <textarea class="input-txt" placeholder="more words and stuff" name="input"></textarea>
  <div>
    <!-- 移除了原来冲突的刷新逻辑，将表单提交目标指向iframe，无需刷新整个主页面即可更新iframe内容 -->
    <input type="submit" value="even more words and stuff">
  </div>
</form>

第二步：添加自动滚动到底部的JS代码 #

直接把下面这段代码加到你HTML页面的</body>标签前面即可，不需要额外修改配置：

// 监听iframe加载完成事件，每次内容更新后自动滚动到底部
document.getElementById('myIframe').addEventListener('load', function() {
  // 获取iframe内部文档对象
  const iframeDoc = this.contentDocument || this.contentWindow.document;
  // 兼容不同浏览器的滚动规则，直接滚动到内容最底部
  iframeDoc.documentElement.scrollTop = iframeDoc.documentElement.scrollHeight;
  iframeDoc.body.scrollTop = iframeDoc.body.scrollHeight;
});

// 如果你一定要保留原来刷新整个页面的逻辑，新增页面加载完成后的触发规则
window.addEventListener('load', function() {
  const iframe = document.getElementById('myIframe');
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  iframeDoc.documentElement.scrollTop = iframeDoc.documentElement.scrollHeight;
  iframeDoc.body.scrollTop = iframeDoc.body.scrollHeight;
});

生效逻辑说明 #

不管是提交表单更新iframe内容，还是刷新整个主页面，只要iframe加载完成就会自动触发滚动到最底部的逻辑，完全符合你始终显示最新输出的需求。

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