彈出窗口中的空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

回答

相關問題