Как вывести Яндекс карту в jquery ui dialog. При разработке, а точнее доработке своего сервиса Конструктор Яндекс Карт, столкнулся с задачей, на первый взгляд весьма тривиальной. Надо было вывести Яндекс карту в форме диалогового окна jquery ui.

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

Дело еще осложнялось тем, что карту надо было выводить в iframe. Я хотел сделать что-то вроде "песочницы", для запуска кода.
Попробовал решить в лоб

var _frame = jQuery('<iframe></iframe>').attr("frameborder", "0"), _vbox = jQuery('<div></div>'), doc;
jQuery('body').append(_vbox);
_vbox.append(_frame).dialog();
_frame.width(500);
_frame.height(500);
var element = _frame.get(0);
if ( element.nodeName.toLowerCase() === "iframe" ) {
	if (element.contentDocument)			// Gecko
		doc = element.contentDocument;
	else if (element.contentWindow)			// IE
		doc = element.contentWindow.document;
}else 
	doc = element;
doc.open();
doc.write('<html><head><title>Конструктор Yandex карт</title></head><body>{ код вывода Яндекс Карты сгенерированный сервисом}</body></html>');
doc.close();

и вновь у это великолепного кода, всего один минус. Он не работал(

Через несколько часов, мой лучший друг Гугл, сообщил мне, следующее: jquery ui dialog не использует то же элемент, который подает в него при запуске плагина. Т.е. после установки диалога,  мы пытаемся повлиять на его содержимое, которое таковым уже не является. Это кривая дорожка. Забегая вперед скажу, дорожка была верная, и гугл мне не товарищ

 

Некий пользователь, с умного форума сообщал, что стоит работать с событием open, диалога. Оно срабатывает в момент открытия диалога и в нем, уже можно работать с верным контекстом this.

Вот это верная дорожка, как  продвижение сайтов от http://prodvijenie-web.ru/ верный путь в развитии Вашего бизнеса. 

Все, что ниже _vbox.append(_frame).dialog(); нужно засунуть в вызов dialog

 

 var _frame = jQuery('<iframe></iframe>').attr("frameborder", "0"), _vbox = jQuery('<div></div>'), doc;
jQuery('body').append(_vbox);
_vbox.dialog({
	open:function(){
		var div = jquery(this);
		div.append(_frame);
		_frame.width(500);
		_frame.height(500);
		var element = _frame.get(0);
		if ( element.nodeName.toLowerCase() === "iframe" ) {
			if (element.contentDocument)			// Gecko
				doc = element.contentDocument;
			else if (element.contentWindow)			// IE
				doc = element.contentWindow.document;
		}else 
			doc = element;
		doc.open();
		doc.write('<html><head><title>Конструктор Yandex карт</title></head><body>{ код вывода Яндекс Карты сгенерированный сервисом}</body></html>');
		doc.close();
	}
});

чудо-код вновь не работал. 

 

Методом научного тыка (благо образование математическое), за комментировал строку

//doc.close();

все заработало. Если Вы не используете iframe, то Ваш код вероятно запустился уже давно. И вы даже не читаете эту статью. Ну, а если читаете, то значит - это вновь кому-нибудь нужно. 

 

 

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии  

Guest
# Guest 07.05.2013 14:51
тестил и тоже забыл про комментирование строки, сделал - всё заработало. Спасибо за пример =)
Alex Shmalex
# Alex Shmalex 20.08.2015 16:55
Зачем все так сложно?
dialog.dialog("option", "title", "Как нас найти");
dialog.dialog("option", "width", 640);
dialog.dialog("option", "height", 520);
dialog.dialog("open");

$("#dialog-content").html('');
$('', {
src: 'map/list/',
id: 'mapFrame',
frameborder: 0,
scrolling: 'no',
width: '600px',
height: '450px'
}).appendTo('#dialog-content');

Все.
Alex Shmalex
# Alex Shmalex 20.08.2015 16:56
Зачем все так сложно?
dialog.dialog("option", "title", "Как нас найти");
dialog.dialog("option", "width", 640);
dialog.dialog("option", "height", 520);
dialog.dialog("open");

$("#dialog-content").html('');
$(' < i f r a m e > ', {
src: 'map/list/',
id: 'mapFrame',
frameborder: 0,
scrolling: 'no',
width: '600px',
height: '450px'
}).appendTo('#dialog-content');

Все.
Alex Shmalex
# Alex Shmalex 20.08.2015 16:57
Короче сайт вырезает из 7 строки кода тег ифрейм
AlexInna
# AlexInna 03.09.2019 00:15
https://xdan.ru много полезной информации...