Пустой 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 не входит. –

Вы пытаетесь получить html документа, используя '$ (document) .html()'.Вы должны использовать '("html"). Html()'. Это приводит к тому, что первое предупреждение возвращает null. Другие два могут быть вызваны тем, что DOM не готов к тому моменту, когда вы попытаетесь получить к нему доступ. Попробуйте добавить таймаут, чтобы задержать их. –

Rob - jQuery включен в родительскую страницу, которая, по-видимому, позволяет ему работать во всплывающем окне. (Или, может быть, нет?) В любом случае, не имеет значения, добавляю ли я также тег script для ref jQuery в notification.html – RMD

Ok. Я понял это. Это довольно контрастно интуитивно.

В принципе, я загрузил все соответствующие библиотеки 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 ");' в каждом кадре (по мере необходимости) и прикреплять обработчики событий всплывающего окна в javascript оттуда, используя '$ nPopup' в качестве контекста. Присоединение обработчиков в js обычно лучше, чем подход HTML PLUS, в этом случае избежит использования 'top.SourceFrame. ... 'в всплывающем окне для адресации элементов js в регулярных кадрах. –

Согласно this reference, с помощью window.createPopup() "скрипты должны назначать контент (а не внешний URL) для всплывающего объекта, возвращаемого методом".

Если вы хотите назначить контент внешним URL-адресом, вам необходимо использовать непатентованный (кросс-браузер) метод window.open().

С window.open() связь между главным окном и всплывающим окном все еще может быть выполнена.

Предполагая, всплывающее окно будет открыто с var myPopup = window.open(...);, то:

Главное окно адреса всплывающее окно, как myPopup
Всплывающие адреса главного окна, как opener

источник

2012-04-16 20:12:20

Я не назначаю внешний URL. Я загружаю содержимое с этого внешнего URL через jQuery и назначая это содержимое во всплывающем окне. – RMD

Да, конечно, я вижу сейчас. Doh! –

Пустой DOM внутри всплывающего окна

ответ

Смежные вопросы