Мне нужно создать приложение, в котором вы можете разместить маркер на веб-сайте, который загружается с помощью iframe.
Моей первой мыслью было использование div-обертки вокруг iframe, а затем вставить другой div с абсолютной позицией.однако это работает не так, как я хотел, потому что если вы измените размер окна, маркер больше не будет находиться в правильном месте, потому что он относится к окну браузера, а не к элементу, на котором он размещен.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="iframe-container">
<div class="marker"></div>
<iframe id="target" src="https://somesite.com"></iframe>
</div>
</body>
</html>
CSS:
#target{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.iframe-container{
position:relative;
}
.marker{
width:50px;
height:50px;
border-radius:50%;
position:absolute;
left:250px;
top:250px;
background:red
}
Чтобы лучше понять, что я хочу, вы можете посетить https://projecthuddle.io/ и нажать «Попробуйте демо»"и выберите вариант" веб-сайт ".
Я знаю, что мне нужно использовать javascript, чтобы получить положение элемента внутри iframe, а затем динамически обновлять позицию моего маркера div, но, поскольку мои навыки работы с javascript довольно ограничены, я могуне могу понять это в одиночку.