弹出窗口中的空 DOM

Empty DOM inside popup window

本文关键字：DOM 窗口      更新时间：2023-09-26

我有一个必须跨越多个帧的弹出窗口，所以我正在使用window.createPopup来使其工作。（IE6、7 和 8。

以下是我用于创建弹出窗口的功能：

function ShowMyPopup() {
    notificationPopup = window.createPopup();
    $(notificationPopup.document.body).load("/notification.html");
    notificationPopup.show($(sourceFrame.document.body).width() - 510, $(sourceFrame.document.body).height() - (510 - $(sourceFrame.document.body).height()), 500, 500, sourceFrame.document.body);
}

这似乎效果很好。我应该看到弹出窗口。问题是，无论我做什么，我似乎都无法访问生成的弹出窗口中的任何 DOM 元素。我已经尝试了各种jQuery方法以及直接的getElementById，并且都返回NULL。以下是通知的内容.html：

<html>
<head>
    <script type="text/javascript">
        $(document).ready(function () {
            alert($(document).html());
            alert($("#divNotification").html());
            alert(document.getElementById("divNotification"));
        });
    </script>
</head>
<body>
    <div id="divNotification" onclick="$(this).toggle();">
        <h3>Some Notification!</h3>
        Testing 1234...
    </div>
</body>
</html>

我看到三个警报，所以我知道jQuery正在工作，但所有三个警报都只显示"NULL"。如果我单击生成的div，onClick 会触发，但我收到"预期对象"错误。

这是怎么回事？

根据此参考，使用window.createPopup()"脚本必须将内容（而不是外部 URL）分配给方法返回的弹出对象"。

如果要使用外部 URL 分配内容，则需要使用非专有（跨浏览器）方法 window.open() 。

使用window.open()，主窗口和弹出窗口之间的通信仍然可以执行。

假设弹出窗口使用 var myPopup = window.open(...); 打开，则：

  • 主窗口地址弹出窗口为myPopup
  • 弹出窗口将主窗口地址为opener

好的。我想通了。这是非常违反直觉的。

基本上，我最终将所有相关的javascript库加载到源框架中。然后，我必须按源框架的名称显式引用源框架才能访问这些方法。

如果任何javascript（甚至是弹出窗口中的javascript）想要访问弹出窗口的DOM，则必须完全限定它（或为jQuery提供正确的根对象）才能使其工作。

例如，这是我的新通知.html：

<div id="divNotification" onclick="top.SourceFrame.MakePopupRed();">
    <h3>Some Notification!</h3>
    Testing 1234...
</div>

现在，在我的源框架引用的javascript库中：

function MakePopupRed() {
    if (notificationPopup) {
        $("#divNotification", notificationPopup.document).css("background-color", "red");
    }
}

所以，基本上，看起来在从window.createPopup创建的弹出窗口中运行的javascript是在父窗口的上下文中执行的，而不是弹出窗口本身！

相关文章：