在前端开发中，经常需要嵌入外部网站或者其他页面。而这些页面通常是以 iframe 的形式展示的。但是，有时候我们希望在一个页面内控制 iframe 的滚动，以实现更好的用户体验。本文将介绍使用 JavaScript 控制 iframe 滚动的方法。
方法一：直接操作 iframe 中的内容
最简单的方法是通过 JavaScript 直接操作 iframe 内容的滚动条。例如，我们可以通过以下代码获取 iframe 元素并设置其 scrollTop 值：
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.scrollTo(0, 100);这种方法虽然简单易用，但是它存在一些缺点。首先，这种方法只适用于嵌入的页面和主页面处于同一域名下的情况。否则，由于跨域限制，我们无法直接访问 iframe 内部的 DOM。其次，由于 iframe 中的内容可能是异步加载的，因此我们需要确保内容已经完全加载完成才能进行操作。
方法二：使用 postMessage 进行通信
为了避免跨域问题，我们可以利用 HTML5 中的 postMessage API 进行通信。具体来说，我们可以在 iframe 内部添加以下代码：
window.addEventListener('message', event => {
if (event.data.scrollTop) {
window.scrollTo(0, event.data.scrollTop);
}
});这段代码监听 message 事件，如果收到了 scrollTop 属性，则将整个页面滚动到相应位置。
然后，在主页面中，我们可以这样发送消息：
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage({
scrollTop: 100
}, '*');这段代码向 iframe 发送一个对象，其中包含了 scrollTop 属性。由于我们使用了通配符 "*"，因此消息可以发送到任意域名下的页面中。在接收到消息后，iframe 内部的代码会将页面滚动到指定位置。
这种方法非常灵活，可以适用于不同域名之间的通信，并且可以避免直接操作 iframe 内容的安全问题。但是，它需要我们手动编写一些额外的代码来处理消息的传递和解析。
示例代码
下面是一个完整的示例，演示了如何使用 postMessage 控制 iframe 滚动：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- -- ------ ---- ------------------
-------
------
------- -------------- -----------------------------
--------
----- ------ - -------------------------------------
------------------------------- -- -- -
-- -- ------ ---------
----------------------------------
---------- ---
-- -----
---
---------------------------------- ----- -- -
-- ---------------------- -
------------------ ----------------------
-
---
---------
-------
-------在这个示例中，我们将 iframe 嵌入了一个主页面中，并且等待 iframe 加载完成后发送消息。在 iframe 中，我们监听了 message 事件并处理了消息的内容。通过这种方式，我们可以实现对 iframe 滚动的控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25656