0
249
VistasDiv no obtiene la posición exacta al pasar el mouse
Tengo un div y quiero que se muestre exactamente en la misma posición que el elemento flotante dentro del iframe . Obtiene la altura y el ancho correctos, pero no la parte superior e izquierda. ¿Qué estoy haciendo mal? ¿Cómo hacer que obtenga la posición correcta del elemento?
Aquí está el código:
<html> <body> <div> <div id="box"></div> <p id="a">You clicked on:</p> <iframe id="zzz" srcdoc="<html><h1>hello</h1><button> click </button></html>" width="500" height="500" ></iframe> </div> <script> let elem = ""; let myiframe = document.getElementById("zzz").contentWindow; let div = document.getElementById("box"); myiframe.addEventListener("mouseover", function (e) { elem = e.target; var rect = elem.getBoundingClientRect(); x = rect.left; y = rect.top; w = rect.width; h = rect.height; document.getElementById("a").innerHTML = elem.tagName + " width: " + w + " height: " + h; div.style.display = "block"; div.style.position = "absolute"; div.style.width = w; div.style.height = h; div.style.left = x; div.style.top = y; }); </script> <style> #box { border: blue 1px solid; height: 25px; width: 50px; display: none; } </style> </body> </html>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Esto ocurre porque el div se coloca en relación con la esquina superior izquierda de la página, en lugar de la esquina superior izquierda del iframe . Puede agregar las coordenadas X e Y del iframe a las coordenadas que obtiene de getBoundingClientRect() .
Por ejemplo:
let elem = ""; let myiframe = document.getElementById("zzz").contentWindow; let div = document.getElementById("box"); myiframe.addEventListener("mouseover", function (e) { elem = e.target; var rect = elem.getBoundingClientRect(); x = rect.left; y = rect.top; w = rect.width / 2; // It was a little bit hard to hover over anything because the div was blocking it, so I halved width and height. h = rect.height / 2; document.getElementById("a").innerHTML = elem.tagName + " width: " + w + " height: " + h; div.style.display = "block"; div.style.position = "absolute"; var a = document.getElementById("zzz").getBoundingClientRect(); div.style.width = w; div.style.height = h; div.style.left = x + a.left; // Iframe's x coordinate div.style.top = y + a.top; // Iframe's y coordinate }); <html> <head> </head> <body> <div> <div id="box" style="display: block; position: absolute; width: 1px; height: 1px; left: 7.98952px; top: 41.9606px; border: 2px solid black;"></div> <p id="a">HTML width: 250.1717071533203 height: 54.38176345825195</p> <iframe id="zzz" srcdoc="<html><h1>hello</h1><button> click </button></html>" width="500" height="500"></iframe> </div> <script> let elem = ""; let myiframe = document.getElementById("zzz").contentWindow; let div = document.getElementById("box"); myiframe.addEventListener("mouseover", function (e) { elem = e.target; var rect = elem.getBoundingClientRect(); x = rect.left; y = rect.top; w = rect.width; h = rect.height; document.getElementById("a").innerHTML = elem.tagName + " width: " + w + " height: " + h; div.style.display = "block"; div.style.position = "absolute"; var a = document.getElementById("zzz").getBoundingClientRect(); div.style.width = w; div.style.height = h; div.style.left = x + a.left; div.style.top = y + a.top; div.innerText = "..."; }); </script> </body> </html>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta