Как родительское окно Javascript может отправлять данные во всплывающее окно?

Я пишу приложение на основе браузера (или, скорее, быстрое прототипирование приложения) с использованием HTML и Javascript. Я хотел бы, чтобы главное окно могло отображать всплывающие окна с динамическими данными. Однако я не могу понять, как передавать данные из родительского окна во всплывающее окно в Javascript. Обратите внимание, я работаю с предположением, что приложение может использоваться в «автономных» сценариях, поэтому все динамические данные должны поступать из главного окна.

В идеале я хотел бы написать

var popup = window.open("popup.html", someidentifier, "");
popup.document.getElementById("SomeIdInPopupHtml").innerHTML = "1,2,3,4";

Однако функция getElementById возвращает NULL. Как передать данные во всплывающие окна из родительского окна?


javascript popup
person Willi Ballenthin    schedule 03.03.2011    source источник
comment
Я знаю, что это может быть глупый вопрос, но уверены ли вы, что в дочернем окне есть узел с таким идентификатором? Помните, случай имеет значение!   -  person Steven P.    schedule 04.03.2011
comment
находится ли var popup в рамках другой вызывающей его функции? синтаксис у вас правильный.   -  person rayman86    schedule 04.03.2011
comment
@ Стивен Палиго, да, popup.html (в этом примере) имеет четко определенный элемент данных.   -  person Willi Ballenthin    schedule 04.03.2011

Ответы (4)


arrow_upward
1
arrow_downward

Показывает ли всплывающее окно контент из другого домена, чем родительский? Если да, то короткий ответ: вы не можете.

Длинный ответ заключается в том, что вы можете отправить фрагмент href всплывающего окна (т.е. часть после # в протоколе://server/path?query#fragment). Если контент во всплывающем окне знает, что его фрагмент нужно проверить на наличие изменений, вы можете передать ему данные.

Если он из того же домена, ваш код должен работать, пока существует элемент с этим идентификатором.

person OrangeDog    schedule 03.03.2011
comment
Спасибо за ответ, я думаю, что смогу работать с этой идеей. - person Willi Ballenthin; 04.03.2011

arrow_upward
1
arrow_downward

Однако функция getElementById возвращает NULL.

Потому что popup.html еще не загрузился. Если вы хотите взаимодействовать с содержимым документа, вам придется перезвонить позже, когда он завершит загрузку.

Для полностью динамических всплывающих окон open с пустым URL-адресом и popupwindow.document.write в них их содержимое. Для всплывающих окон с совместным сценарием, загружаемых из отдельного документа, дочерний документ должен вызывать родительский документ, когда он готов к доступу. Или просто используйте всплывающие элементы div на странице, которые, как правило, меньше раздражают как вас, как программиста, так и конечного пользователя.

person bobince    schedule 03.03.2011
comment
Спасибо! Можете ли вы предложить хороший способ перезвонить позже, чтобы гарантировать завершение загрузки страницы? Я попробовал jQuery $(popup.document).ready(...), но мне это не помогло. - person Willi Ballenthin; 04.03.2011
comment
Кроме того, для document.writing... это был мой первоначальный подход, однако я обнаружил, что пишу JS, который писал JS. Это было не очень красиво и казалось неправильным. - person Willi Ballenthin; 04.03.2011
comment
@Willi: Проблема с $(something in another document) заключается в том, что jQuery на самом деле не поддерживает междокументный скриптинг: некоторые вещи работают, другие закодированы так, чтобы полагаться на конкретный объект document, с которым связан jQuery (например, ready, но также и многие другие) 'т. Обычно вам нужно иметь отдельную копию jQuery в каждом документе. document.write() — неприятный хак, но разумный для простых документов. В противном случае включите хук, чтобы дочерний элемент вызывал своего родителя в состоянии готовности. - person bobince; 10.03.2011

arrow_upward
0
arrow_downward

Позвольте мне начать с представления возможного решения, с которым я только что экспериментировал. Однако я хотел бы поощрять отзывы и лучшие решения...

Это не очень аккуратно, но я могу добавить параметры запроса в стиле GET к исходному URL-адресу всплывающего окна:

var popup = window.open("popup.html?" + identifier, somename, "");

Теперь в моей конкретной ситуации всплывающее окно представляет собой представление некоторой модели, идентифицируемой уникальным идентификатором, поэтому всплывающее окно может запросить родительское окно для данных, связанных с этим идентификатором:

var model = window.opener.getModel(document.location.href.split("?")[1]);
do_something_with_model(model);

Эта стратегия не будет работать во всех случаях, особенно когда данные не могут быть легко маршалированы в реализацию getModel(). Однако в моем случае, я думаю, этот подход может сработать.

Буду признателен за отзывы об этой стратегии. Спасибо!

person Willi Ballenthin    schedule 03.03.2011

arrow_upward
0
arrow_downward

Когда пользователь нажимает на вашу ссылку, чтобы открыть всплывающее окно, передайте ему строку запроса, а затем отреагируйте на это значение кодом на стороне вашего сервера.

person The Muffin Man    schedule 03.03.2011
comment
Спасибо за ваш ответ, однако у меня может быть несколько всплывающих окон, каждое из которых содержит разную информацию. Например, разное содержимое всплывающих окон для каждого игрока НБА, хотя исходный код шаблона popup.html будет одинаковым. Как я могу передать идентификатор всплывающему окну? - person Willi Ballenthin; 04.03.2011
comment
@Willi Ballenthin, я понимаю, что у вас могут быть другие данные, я обновлю свой ответ, чтобы он был немного более очевидным. - person The Muffin Man; 04.03.2011
comment
к сожалению, реакция сервера не отвечает на вопрос: обратите внимание, я работаю с предположением, что приложение может использоваться в автономных сценариях, поэтому все динамические данные должны поступать из главного окна. - person Willi Ballenthin; 04.03.2011
comment
@Willi Ballenthin, ранее опубликованный код может вызывать функции в родительском окне и запускать их только в родительском окне. Я не верю, что вы можете передавать данные в дочернее окно. Вы говорите, что приложение может использоваться в автономном режиме, почему бы не хранить все возможные данные в дочернем окне. Когда пользователь щелкает в родительском окне, он передает строку запроса, затем получает строку запроса и показывает правильные данные. - person The Muffin Man; 04.03.2011
comment
Или вы можете просто использовать свое собственное всплывающее окно с div? - person The Muffin Man; 04.03.2011