本文介绍如何让嵌入在 iframe 中的网页在加载完成后自动平滑滚动至页面底部，适用于数字标牌、信息展示屏等无需交互的场景。
要在 iframe 中实现目标页面的自动滚动到底部，关键在于：目标页面（即 iframe 的 src 所指向的 HTML 文件）自身需包含滚动逻辑，而非在父页面中控制 iframe 的滚动——因为跨域限制及 iframe 的 DOM 隔离机制，父页面通常无法直接操作子页面的 scrollTo（除非同源且显式获取 iframe.contentWindow）。
✅ 推荐做法：在目标页面（即被嵌入的 HTML）末尾添加 JavaScript，监听页面加载完成，并执行平滑滚动到底部：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自动滚动页面</title>
<style>
body { margin: 0; font-family: -apple-system, sans-serif; }
p { margin: 16px 0; padding: 0 20px; line-height: 1.6; }
</style>
</head>
<body>
<!-- 示例长内容 -->
<p>欢迎来到自动滚动展示页</p>
<p>这是第2段内容...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/000/000/081/179336525482166.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<!-- ... 更多段落（确保内容足够长以触发滚动） -->
<p>这是最后一段内容，位于页面底部。</p>
<!-- 滚动脚本：必须放在 body 底部或使用 DOMContentLoaded -->
<script>
// 等待 DOM 加载完成，再滚动（更可靠）
document.addEventListener('DOMContentLoaded', () => {
window.scrollTo({
left: 0,
top: document.body.scrollHeight,
behavior: 'smooth'
});
});
</script>
</body>
</html>? 重要注意事项：
- ✅ behavior: "smooth" 提供原生平滑动画，现代浏览器均支持；若需兼容旧版 IE，可降级为 window.scrollTo(0, document.body.scrollHeight)（无动画）。
- ✅ 建议使用 DOMContentLoaded 而非直接写在 <script> 标签末尾，避免因 DOM 未就绪导致 scrollHeight 计算不准确。 </script>
- ❌ 不要在父页面中尝试 iframe.contentWindow.scrollTo(...) —— 若 iframe 跨域（如加载外部网站），将触发安全策略报错（Blocked a frame from accessing a cross-origin frame）。
- ⚠️ 若需循环滚动（如“回到顶部→再滚到底”），可结合 setInterval 与 scrollIntoView() 或 CSS @keyframes 实现，但需注意性能与用户体验。
? 进阶提示（同源 iframe 场景）：
若 iframe 与父页面同源，你也可在父页面中监听 iframe 加载完成事件并触发滚动：
const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', () => {
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframe.contentWindow.scrollTo({
top: iframeDoc.body.scrollHeight,
behavior: 'smooth'
});
});但该方式仅限同源，且依赖 iframe 内容已完全渲染。因此，最通用、最可靠的方式仍是让目标页面自我驱动滚动——简洁、健壮、无依赖、零跨域风险。
