如何实现iframe仅首次点击加载并通过切换事件隐藏/显示？

单iframe场景优化 #

你的现有代码存在两处问题：初始状态下iframe容器会默认显示，且点击复选框时会重复设置src（即使内容已加载）。以下是优化后的实现：

<style>
/* 初始隐藏iframe容器，避免页面加载时占位 */
#iframecon {
    display: none;
}
</style>

<input type="checkbox" id="button2">
<div id="iframecon">
    <iframe id="iframe2" width="100%" height="100%" src=""></iframe>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#button2").click(function(){
        const $iframe = $("#iframe2");
        const $container = $("#iframecon");
        
        // 仅当iframe未加载过内容时，设置src加载目标页面
        if (!$iframe.attr("src")) {
            $iframe.attr("src", "/page1.php");
        }
        
        // 切换容器的显示/隐藏状态
        $container.toggle();
    });
});
</script>

多iframe场景复用方案 #

如果有多个iframe，建议用数据属性+统一事件绑定减少重复代码，提升维护效率：

<style>
.iframe-container {
    display: none;
    margin: 10px 0;
}
</style>

<!-- 按钮1对应iframe1 -->
<input type="checkbox" class="iframe-toggle-btn" data-iframe-id="iframe1" data-iframe-src="/page1.php"> 加载页面1
<div class="iframe-container">
    <iframe id="iframe1" width="100%" height="300" src=""></iframe>
</div>

<!-- 按钮2对应iframe2 -->
<input type="checkbox" class="iframe-toggle-btn" data-iframe-id="iframe2" data-iframe-src="/page2.php"> 加载页面2
<div class="iframe-container">
    <iframe id="iframe2" width="100%" height="300" src=""></iframe>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $(".iframe-toggle-btn").click(function(){
        const $btn = $(this);
        // 从数据属性获取关联的iframe ID和目标地址
        const iframeId = $btn.data("iframe-id");
        const targetSrc = $btn.data("iframe-src");
        
        const $iframe = $("#" + iframeId);
        const $container = $btn.next(".iframe-container");
        
        // 仅首次点击时加载iframe内容
        if (!$iframe.attr("src")) {
            $iframe.attr("src", targetSrc);
        }
        
        // 切换容器显示状态
        $container.toggle();
    });
});
</script>

核心要点说明 #

• 初始隐藏容器：通过CSS设置display: none，避免页面加载时容器占位，同时确保iframe不会提前加载内容
• 避免重复加载：判断iframe的src属性是否为空，仅首次点击时设置src，防止重复请求目标页面
• 统一事件处理：多iframe场景用类选择器绑定事件，通过数据属性关联对应iframe，减少冗余代码

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