Question

这里有些奇怪的情况。我知道这离理想的设置还很遥远，但这是我一直坚持的工作，没有宽大的处理方法。

基本上，我有一个模式窗口，该窗口具有通过iframe嵌入的电子邮件注册表单。

我在iframe中有一个脚本，当按下“提交”按钮时，该脚本会将类设置为主要模式。要将类设置为模态，我使用以下内容：

$(document).on("click", "#submit-btn", function(e) {
    window.parent.$("#modal-popup").addClass("submitted");
}

我已验证此代码可以正常工作。在检查器中，每当我按下“提交”按钮时，我都会看到“已提交”类已添加到模式中。

但是...在iframe之外，我正在运行另一个脚本，该脚本检查用户何时按下模式上的关闭按钮。

我想要它，以便如果模态具有“已提交”类，它会做一件事-但是，如果它没有该类，它会做其他事情。

所以我有以下内容：

$(".close-exit-modal").on("click", function(e) {
    if ($("#modal-popup").hasClass("submitted")) {
        //do something
    } else {
        //do something else
    }
});

不幸的是，每次我尝试脚本时，都会执行“执行其他操作”。该模态清楚地表明它具有适当的类-在我的一生中，我不知道为什么该脚本无法识别它。

有什么想法吗？

Answer 1

由于您似乎可以更改父级，对我而言，这表明您在同一域中。因此，您可能可以做一些不同的事情。

$(document).on("click", "#submit-btn", function(e) {
    window.parent.$("#modal-popup").addClass("submitted");
    //directly call a method in the parent to let it know the class changed
    window.parent.modalPopupWasSubmitted();
});

$(document).on("click", "#submit-btn", function(e) {
    window.parent.$("#modal-popup").addClass("submitted");
    //trigger a custom event that your parent page can have an event listener for
    $(window.parent).trigger('modalWasSubmitted');
});

（可选）根据您需要的浏览器支持，您还可以潜在地使用postMessage来让父母知道发生了什么事。参考https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

检查从iFrame动态添加的类

1 个答案: