如何让按钮在发送时刷新页面，并且在重新加载时同时使用相同的按钮让 iframe 滚动到框架的底部

Posted 2023-05-08

【中文标题】如何让按钮在发送时刷新页面，并且在重新加载时同时使用相同的按钮让 iframe 滚动到框架的底部

【英文标题】：how to have a button refresh the page on send and also have iframe scroll to the bottom of the frame using the same button simultaneously on reload

【发布时间】：2021-08-31 11:39:56

【问题描述】：

你好，我想让我的 iframe 滚动到最底部，新输出显示在每次由按钮触发的重新加载时，我研究了这个问题，似乎很难找到答案, 将 iframe 自动滚动到底部或触发其滚动到两者似乎是一件相当复杂或棘手的事情，并且已经困扰了我一个月，我对 html 和 CSS 了解很多，但如果 jquery 仍然有一些 java 问题应该需要使用，我知道它是如何工作的，但如果有人可以提供帮助，我需要大量参考，我感谢它 1000 倍以上，谢谢！ （基本上我需要让 iframe 保持不断滚动到底部-）这是我到目前为止的 HTML 部分代码-

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

<form method="post" action="page2.php">
<input type="textarea" class="input-txt" placeholder="more words and stuff" name = "input">

<div2>
<input type="submit" value="even more words and stuff" onClick="window.location.href=window.location.href">
</p>
</div2>
</form>```

【问题讨论】：

您想要一个按钮来重新加载 iframe 并滚动到底部？

我已经有一个按钮可以在发送时重新加载，但我希望同一个按钮在单击发送和重新加载时也可以滚动仅滚动 iframe，而不是整个页面到底部，这样我就可以在底部看到新的输出。

【参考方案1】：

要滚动到<iframe> 的底部，请使用：

iframe.contentWindow.scrollTo(0, iframe.contentDocument.documentElement.scrollHeight);

请注意，如果 <iframe> 的来源与您网站的来源不同，这将不起作用

完整示例：

<iframe src="https://stacksnippets.net"></iframe>
<br/>
<button>Reload & Scroll To Bottom</button>
<script>
const iframe = document.querySelector('iframe');
document.querySelector('button').addEventListener('click', function()
  iframe.contentWindow.location = iframe.src;
  iframe.contentWindow.scrollTo(0, iframe.contentDocument.documentElement.scrollHeight);
)
</script>

【讨论】：

天哪，谢谢！！还有-我到底把这个放在代码的什么地方？我像这样使用它吗？：<iframe iframe.contentWindow.scrollTo(0, iframe.contentWindow.height);></iframe>

另外，iframe 正在接收插入到文本框中的信息，该信息被发送到连接到网站的 PHPMyAdmin 服务器，所以这应该仍然有效，对吧？

@KitchenUtensils 是的，应该。我已经更新了我的答案，所以你知道如何包含它。

它似乎仍然对我不起作用-这是当前页面的所有脚本，看看我是否正确合并它-<script src="javascript/main.js"></script> <script language="JavaScript"> onload = function() document.myIframe.document.body.style.fontFamily = "Courier New", "Lucida Console", monospace; </script> <script> document.querySelector('iframe').contentWindow.scrollTo(0, iframe.contentWindow.height); </script>

我觉得我很烦人，因为这个问题对我来说很可能是 - 但它 - 咳嗽 仍然不起作用 - 让我告诉你我是如何使用它的 <script src="javascript/main.js"></script> <script language="JavaScript"> onload = function() document.myIframe.document.body.style.fontFamily = "Courier New", "Lucida Console", monospace; const iframe = document.querySelector('iframe'); document.querySelector('button').addEventListener('click', function() iframe.contentWindow.location = iframe.src; iframe.contentWindow.scrollTo(0, iframe.contentWindow.height); ) </script>跨度>