Question

我需要制作一个应用程序，您可以在其中将标记放置在使用iframe加载的网站上。

我的第一个想法是在iframe周围使用包装div，然后再插入一个具有绝对位置的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技能非常有限，我无法独自解决这个问题。

在iframe中使用JavaScript动态更新div位置

0 个答案: