0

Muy buenos días, me he encontrado con este problema con mi código intentando poner mi div pegado a la parte de arriba del ifrmae:

const x = document.createElement("div");
document.getElementsByTagName("iframe")[0].contentWindow.document.body.appendChild(x);
x.style.width = "50px";
x.style.height = "50px";
x.style.background = "white";
x.style.top= "20px";
x.style.float = "right";
iframe{
  background: black;
}
<iframe></iframe>

EL problema es que cuando le establezco a mi div la propiedad top a 0px es ignorada, ¿Alguien sabe porque ocurre esto, en que me equivoque? (y si puse el postion: absolute)

Si no funciona el código acá es porque stack overflow no me deja acceder al objeto window del iframe, pueden probarlo acá modificando el código: https://www.w3schools.com/css/tryit.asp?filename=trycss3_text-overflow

Les adjunto por si acaso una captura de pantalla de https://codepen.io/pen/:

Muchas gracias compañeros!😃

2
  • No se ve ningún div. Solamente está el iframe el 26 nov. 2022 a las 19:01
  • En la primera línea de mi código JS añado un div y si que funciona, lo que pasa esque acá da error pero si lo pruebas en cualquier otro editor se puede ver el div. Prueba a verlo aquí: codepen.io/pen
    – Roberto
    el 26 nov. 2022 a las 22:06

1 respuesta 1

0

Te comparto una manera algo diferente pero de forma correcta.

            
let x = document.createElement("div"); 
x.classList.add("divCreado"); // estilo css

let iframe = document.querySelector("iframe"); 
let parentDiv = iframe.parentNode; 

parentDiv.insertBefore(x, iframe);
* {
box-sizing: border-box
}

html,body {
margin: 0;
padding: 0
}

.divCreado {
display: block;
width: 50px;
height: 50px;
float: left;
background-color: red
}

iframe {
display: block;
width: 100%
}
            
            
<iframe></iframe>

            

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.