Как закрепить div на странице, которая отображается в iframe?

Question

[Вадим]

На сайте страница отображается в iframe со скроллами. Нужно, после drag&drop, закрепить div на определенном месте страны, которая в iframe. Как это сделать? Гугл не помог.



в src iframe адрес добавляется динамически. Т.е. юзверь может ввести совершенно любой адрес.

Comments

[AIVolkov]

iframe с того же домена, что и основная страница?

Answer 1

[omfg]

Не совсем понятна постановка задачи. Как я понял, тебе нужно:
1)Добавить див в iframe при драг'н'дропе
2)В стилях дива должно быть прописано position:absolute (относительно родителя, т.е фрейма)
3)Назначить диву позицию (top и left)

Что-то типа этого:

//создаем iframe, в принцепи не важно как ты его создаешь, главное присвоить ему имя
var iframe = document.createElement("iframe");
//создаем див и назначаем стили
var div = iframe.document.createElement("div");
div.style.position = "absolute";
div.style.top = x+"px";
div.style.left = y+"px";
iframe.document.body.appendChild(div);

Comments

[AIVolkov]

Но если iframe.src с другого домена — это не сработает.

[Вадим]

сработало. правда, теперь другая проблема, не работает драг-н-дроп, но тут я сам.

Answer 2

[wearymax]

Допустим:
ифрейм (карта) у вас 1200х1200, а видимая ее часть 800х600. Указатель div (метка) это обычный position:absolute но margin у него = координатам X и Y (0-1200 и 0-1200), которые ему присваивает драг-н-дроп этого элемента.

Copy Source | Copy HTML

1. $('#LocationMap').click(function(e){
2.     var x = e.pageX - this.offsetLeft;
3.     var y = e.pageY - this.offsetTop;
4.     $("input[name=location_x]").val(x);
5.     $("input[name=location_y]").val(y);
6.     $("#Flag").css({"margin-left": ""+x+"px"}).css({"margin-top": ""+y+"px"});
7. });
8.  

Я делал примерно так:
1. В админке (блондинка) просто тыкает мышкой на карте и кнопку «Сохранить» для каждого элемента каталога.
2. Юзеры видят это так

Answer 3

[Максим]

Не совсем понял, что вы хотите, но возможно: position:absolute; вам поможет?

Comments

[Вадим]

position: absolute; закрепляет div на моей странице, а мне же нужно чтобы div закрепился на странице, которая открывается в iframe. Грубо говоря, мне нужно на карту, которая открывается в iframe на моей странице, перетащить указатель div, и чтобы при прокрутке карты div был закреплен именно на том месте карты куда его перетащил юзверь.

Answer 4

[AIVolkov]

Если iframe с того же домена, то можно добавить туда (внутрь документа в iframe) свою метку с position:absolute, как пишут выше. Тогда она нормально будет скроллиться вместе с картой. Узнать координаты после drag'n'drop можно через scrollTop/scrollLeft документа в ифрейме и позицию iframe на странице.

Comments

[Вадим]

так в том-то и дело, что в iframe грузится вообще любая страница.

[wearymax]

а зачем вам ифреймы?

[Вадим]

а как вы еще предлагаете загрузить любую страницу внутрь моей страницы?

[wearymax]

например так — $.get(url, data, success) ( api.jquery.com/load )