弹出窗口中的空DOM

我有一个弹出窗口，必须跨越多个框架，所以我使用window.createPopup来获得这个工作。（IE6，7和8）弹出窗口中的空DOM

下面是我使用创建弹出功能：

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”错误。

这是怎么回事？

来源

2012-04-16 RMD

在您的演示中，不包括jQuery。 – 2012-04-16 18:48:15

您试图通过使用'$（document）.html（）'来获取文档的html。你应该使用'（“html”）。html（）'。这导致第一个警报返回null。另外两个可能是由于您尝试访问DOM时没有准备好DOM导致的。尝试添加超时以延迟它们。 – 2012-04-16 19:08:15

Rob - jQuery包含在父页面中，这些apparents允许它在弹出窗口中工作。（或者可能不是？）无论如何，如果我还在notification.html – RMD 2012-04-16 19:21:10

确定。我明白了这一点。这非常直观。

基本上，我结束了加载所有相关的JavaScript库到源框架。然后我必须通过其名称明确引用源框架才能访问这些方法。

如果任何JavaScript - 甚至和JavaScript 内弹出窗口 - 要访问弹出窗口的DOM，你必须完全限定它（或提供jQuery将正确的根对象）为它工作。

举例来说，这里是我的新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"); 
    } 
}

所以，基本上，JavaScript似乎是在由window.createPopup创建的弹出窗口内运行，在父窗口的上下文中执行，而不是弹出窗口本身！

来源

2012-04-17 18:37:16 RMD

你是对的，这是违反直觉的。恭喜你解决这个问题。在实践中，使用例如，抽象弹出应该更容易。 'var $ nPopup = $（“notificationPopup.document”）;'在每个框架中（根据需要），并使用'$ nPopup'作为上下文在JavaScript中附加弹出事件处理程序。在js中附加处理程序通常比HTML方法PLUS更好，在这种情况下，将避免必须使用'top.SourceFrame。 ......弹出窗口中的符号，以便在常规框架中处理js成员。 – 2012-04-17 21:15:00

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

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

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

假设弹出与var myPopup = window.open(...);被打开，则：

主窗口地址弹出作为myPopup
弹出地址主窗口opener

来源

2012-04-16 20:12:20

我没有分配外部URL。我通过jQuery从外部URL加载内容，并将该内容分配给弹出窗口。 – RMD 2012-04-17 15:11:15

是的，当然，我现在看到。卫生署！ – 2012-04-17 20:31:15

弹出窗口中的空DOM

回答

相关问题