通过监听按钮（如 checkbox）的 change 事件，在首次点击时动态设置 iframe 的 src 并加载内容，后续仅通过 css 控制显隐，避免重复加载，显著提升页面性能。
通过监听按钮（如 checkbox）的 change 事件，在首次点击时动态设置 iframe 的 src 并加载内容，后续仅通过 css 控制显隐，避免重复加载，显著提升页面性能。
在 Web 开发中，多个 iframe 同时加载会严重拖慢页面响应速度，尤其当它们指向不同后端资源（如 /page1.php）时。理想的优化方案是：iframe 内容仅在用户首次触发时加载一次，之后所有“显示/隐藏”操作均不重新请求资源，仅切换可见性。这既保障了用户体验，又减轻了服务器压力。
✅ 正确做法：分离「加载」与「显隐」逻辑
关键在于区分两个行为：
- 加载（Load）：仅执行一次，发生在 iframe 首次被需要时（即用户第一次勾选 checkbox）；
- 显隐（Toggle）：纯前端 DOM 操作，通过 display: none/block 或 classList.toggle() 实现，不触发重载。
⚠️ 注意：直接在 onclick 中赋值 src（如 <input onclick="iframe.src=...">）会导致每次点击都重新加载 iframe，违背“只加载一次”的目标；同时，click 事件对 checkbox 不够语义化——应使用 change 事件，它在勾选状态真正改变后才触发，更可靠。
? 示例一：jQuery 实现（推荐初学者）
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="button2" />
<div id="iframecon">
<iframe id="iframe2" width="100%" height="400px"></iframe>
</div>
<script>
$(function() {
const $iframe = $("#iframe2");
const targetSrc = "/page1.php"; // 替换为你的实际 URL
// 初始隐藏 iframe（避免页面加载时预加载）
$iframe.hide();
$("#button2").on('change', function() {
// 仅当 iframe 尚未加载目标地址时，才设置 src（确保只加载一次）
if ($iframe.attr("src") !== targetSrc) {
$iframe.attr("src", targetSrc);
}
// 无论是否已加载，都执行显隐切换
$iframe.toggle();
});
});
</script>? 示例二：原生 JavaScript 实现（轻量、无依赖）
<style>
.iframe-hidden { display: none; }
</style>
<input type="checkbox" id="button2" />
<div id="iframecon">
<iframe id="iframe2" width="100%" height="400px" class="iframe-hidden"></iframe>
</div>
<script>
const checkbox = document.getElementById("button2");
const iframe = document.getElementById("iframe2");
const targetSrc = "/page1.php";
checkbox.addEventListener("change", function() {
if (this.checked && iframe.src !== targetSrc) {
// 首次勾选且未加载 → 设置 src 触发加载
iframe.src = targetSrc;
}
// 根据 checkbox 状态控制显隐（class 切换）
iframe.classList.toggle("iframe-hidden", !this.checked);
});
</script>? 补充说明与最佳实践
为什么用 change 而非 click？
click 在 checkbox 被点击瞬间触发，此时 checked 状态可能尚未更新；而 change 在状态真正变更后触发，逻辑更严谨，尤其在快速连点或键盘操作（空格键切换）时表现稳定。如何验证“只加载一次”？
打开浏览器开发者工具 → Network 标签页，勾选 checkbox 后观察：仅第一次出现 /page1.php 请求，后续切换不再产生新请求。-
进阶建议：
- 若需支持多个 iframe（如 tab 切换场景），可为每个 iframe 维护独立的 loaded 标志或使用 data-loaded="true" 属性；
- 对于敏感内容，注意 iframe 的 sandbox 属性以增强安全性；
- 移动端建议添加 loading="lazy"（虽对 toggle 场景非必需，但作为通用优化）。
通过以上方式，你将获得一个高性能、可维护、符合现代 Web 最佳实践的 iframe 按需加载方案。
