使用JavaScript点击div标签时暂停iframe的实现问题

这个需求完全可以实现，问题主要出在原代码的逻辑错误，以及可能忽略了iframe的跨域访问限制。下面是具体解决方法：

核心要点 #

• 别用removeChild删除元素，删除后再恢复需要重新创建DOM节点，操作复杂且没必要。直接修改style.display属性来隐藏/显示元素更简单可靠。
• 如果iframe和父页面同域，可以直接操作iframe内的DOM元素；如果跨域，必须使用postMessage进行跨域通信，否则浏览器会阻止直接访问。

情况1：iframe与父页面同域 #

直接修改元素显示状态，配合setTimeout实现10秒后恢复：

// 替换成你实际的元素ID
var optionsDiv = document.getElementById("首个div的ID"); // 包含选项的首个div
var nextBtn = document.getElementById("whileing"); // "next"按钮div

nextBtn.addEventListener("click", function() {
    // 隐藏选项div
    optionsDiv.style.display = "none";
    
    // 10秒后重新显示（根据元素原来的display值调整，比如"flex"/"inline-block"等）
    setTimeout(function() {
        optionsDiv.style.display = "block";
    }, 10000);
});

情况2：iframe与父页面跨域 #

跨域时无法直接操作iframe内的DOM，需要通过消息通信实现：

父页面代码 #

var nextBtn = document.getElementById("whileing");

nextBtn.addEventListener("click", function() {
    // 向iframe发送隐藏指令
    document.getElementById("ifr").contentWindow.postMessage({action: "hideOptions"}, "*");
    
    // 10秒后发送显示指令
    setTimeout(function() {
        document.getElementById("ifr").contentWindow.postMessage({action: "showOptions"}, "*");
    }, 10000);
});

iframe内的代码 #

// 监听来自父页面的消息
window.addEventListener("message", function(event) {
    var optionsDiv = document.getElementById("首个div的ID"); // iframe内的选项div
    if (event.data.action === "hideOptions") {
        optionsDiv.style.display = "none";
    } else if (event.data.action === "showOptions") {
        optionsDiv.style.display = "block";
    }
});

原代码的问题说明 #

1. 用ifr.removeChild(s)删除元素，导致无法直接恢复显示，完全没必要。
2. 事件处理函数内重复声明变量s，覆盖全局变量，逻辑混乱。
3. 未使用setTimeout实现10秒后恢复的逻辑。

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