javascript - iFrame 验证

Question

我目前在我的主页中有一个 iframe，其中有许多复选框需要在离开 iframe 之前进行操作。即，如果用户开始检查复选框并在中途通过他们然后在主页上单击返回，即离开 iframe，我希望能够捕获/验证他们已经离开 iframe 并提示他们一条消息指示这个，用“注意:您将丢失此处输入的所有数据 - 离开:是/否？”输入消息。

Answer 1

Prompting a User to Save When Leaving a Page .这篇 4guys 文章听起来正是您所需要的。它讨论了 onbeforeunload 事件。有一些很棒的posts在 stackoverflow 上也有关于 onbeforeunload 的内容。

---

看来 onbeforeunload 确实不会为 iframe 触发。 SCSS !

下面是一些应该可以正常工作的示例代码。这仅在您位于同一域中时才有效，否则 same origin policy将阻止 iframe 与父级对话。

我也没有在许多浏览器中测试过这些，所以 YMMV。

这里有两个选项，具体取决于您希望将更改逻辑提示放在何处。

选项一涉及 iframe 在发生更改时通知父窗口。

父窗口javascript:

    window.onbeforeunload=closeIt;
    var changes = false;
    function closeIt()
    {
      if (changes)
      {
          return "Yo, changes, save 'em?";
      }
    }
    function somethingChanged() {
        changes=true;
    };

iframe javascript:

    $(function() {
        $('input').change(parent.somethingChanged);
    });

选项二涉及 iframe 控制父窗口的 onbeforeunload

父窗口 javascript:

没有 :-)

iframe javascript:

    $(function() {
        parent.window.onbeforeunload = myCloseIt;
        $('input').change(somethingChanged);
    });
    var changes = false;
    function myCloseIt()
    {
      if (changes)
      {
          return "Yo, changes, save 'em?";
      }
    }
    function somethingChanged() {
        changes=true;
    };

在任何一个选项中，原始的 changes 变量都可以加强一点，可能使用 4guys 文章中的技术，看看是否真的有任何变化。 p>

---

如果它们在不同的域中，但您仍然负责 HTML 的“两面”，那么仍然有一些选择，它们只是更难。

xssinterface是一个使用 postMessage 和位置哈希和 secret 巫毒魔法来跨站点通信的库。