Fatal编程技术网

Javascript 弹出窗口中的空DOM

javascript jquery html internet-explorer

Javascript 弹出窗口中的空DOM,javascript,jquery,html,internet-explorer,popup,Javascript,Jquery,Html,Internet Explorer,Popup,我有一个弹出窗口，必须跨越多个帧，所以我使用window.createPopup来让它工作。（IE6、7和8。） 下面是我用来创建弹出窗口的函数： function ShowMyPopup() { notificationPopup = window.createPopup(); $(notificationPopup.document.body).load("/notification.html"); notificationPopup.show($(sourceFra

我有一个弹出窗口，必须跨越多个帧，所以我使用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>

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


$（文档）.ready（函数（）{
警报（$（document.html（））；
警报（$（“#divNotification”）.html（）；
警报（document.getElementById（“divNotification”）；
});
一些通知！
测试1234。。。
我看到三个警报，所以我知道jQuery正在工作，但所有三个警报都显示“NULL”。如果单击生成的div，onClick将触发，但会出现“objectexpected”错误

这是怎么回事？

根据，使用
window.createPopup（）
“脚本必须将内容（而不是外部URL）分配给该方法返回的弹出对象”

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

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

假设弹出窗口是用
var myPopup=window.open（…）打开的，然后：


    

  • 主窗口将弹出窗口地址设置为
    myPopup
    • 

  • 弹出窗口将主窗口地址设置为
    opener
    • 

      好的。我明白了。这很违反直觉
      
基本上，我最终将所有相关的javascript库加载到源代码框架中。然后，我必须通过名称显式引用源帧，以便访问这些方法
      
如果任何javascript（甚至弹出窗口中的javascript）想要访问弹出窗口的DOM，您必须完全限定它（或者提供jQuery将是正确的根对象）才能工作
      
例如，下面是我的new 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>

      

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

      

      因此，基本上，似乎在从window.createPopup创建的弹出窗口中运行的javascript在父窗口的上下文中执行，而不是在弹出窗口本身中执行
      在您的演示中，不包括jQuery。您正在尝试使用“$（document.html（）”获取文档的html。您应该使用“（“html”）.html（）”。这将导致第一个警报返回null。另外两个原因可能是在您尝试访问DOM时，DOM尚未准备就绪。尝试添加一个超时来延迟它们。Rob-jQuery包含在父页面中，这显然允许它在弹出窗口中工作。（或者可能不是？）无论如何，如果我也在notification.htmlAlex中为ref jQuery添加一个脚本标记，这没有什么区别——您关于使用$（“html”）.html（）的建议为我指明了正确的方向。显然，使用window.CreatePopup创建的窗口必须被显式引用，即使是在其自身内容中。调用$（“html”）.html（）实际上向我显示了源框架的内容！我没有分配外部URL。我通过jQuery从外部URL加载内容，并将该内容分配到弹出窗口。你说得对，这是违反直觉的。恭喜你解决了这个问题。在实践中，使用例如
      var$nPopup=$（“notificationPopup.document”）抽象弹出窗口应该更容易
      在每个帧中（根据需要），并使用
      $nPopup
      作为上下文，从那里以javascript附加弹出窗口的事件处理程序。在js中附加处理程序通常比HTML方法更好，而且在这种情况下，将避免使用
      top.SourceFrame符号，用于在常规框架中寻址js成员。