Question

我有一个必须跨越多个框架的弹出窗口，所以我使用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。以下是notification.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会触发，但是我收到“Object Expected”错误。

这里发生了什么？

Answer 1

根据this reference，window.createPopup()“脚本必须将内容（不是外部URL）分配给方法返回的弹出对象”。

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

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

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

主窗口将弹出窗口设置为myPopup
弹出窗口将主窗口设置为opener

Answer 2

确定。我想通了。这非常直观。

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

如果任何javascript - 甚至javascript 里面弹出窗口 - 想要访问弹出窗口的DOM，你必须完全限定它（或者提供jQuery将正确的根对象）才能使它工作。 / p>

例如，这是我的新notification.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在父窗口的上下文中执行，而不是弹出窗口本身！

弹出窗口中的空DOM

2 个答案: