How to anchor a div on a page that is rendered in an iframe?

Question

HTML

On the site, the page is displayed in an iframe with scrolls. It is necessary, after drag & drop, to fix the div at a certain place in the country, which is in the iframe. How to do it? Google didn't help.

in src iframe the address is added dynamically. Those. The user can enter absolutely any address.

Answer 1

The problem statement is not entirely clear. As I understand it, you need to:
1) Add a div to the iframe when drag'n'drop
2) Position:absolute must be written in the styles of the div (relative to the parent, i.e. frame)
3) Assign the position to the div (top and left)
What something like this:

//создаем 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);

Answer 2

Let's say:
your iframe (map) is 1200x1200, and its visible part is 800x600. The div pointer (label) is just position:absolute but its margin is the x and y coordinates (0-1200 and 0-1200) that this element's drag-n-drop assigns to it.

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.  

I did something like this:
1. In the admin panel (blonde) she simply clicks on the map and the "Save" button for each element of the catalog.
2. Users see it like this

Answer 3

Didn't quite understand what you want, but it's possible: position:absolute; help you?

Answer 4

If the iframe is from the same domain, then you can add your own label with position:absolute there (inside the document in the iframe), as they say above. Then it will normally scroll along with the map. You can find out the coordinates after drag'n'drop through the scrollTop/scrollLeft of the document in the iframe and the position of the iframe on the page.