div overlay sobre iframe

Estoy haciendo un widget similar a los widgets uservoice, excepto que quiero que el contenido de la página esté en un iFrame en lugar de que el widget aparezca a través de javascript. ¿Cómo puedo tener una página completa (anchura/altura 100%) iFrame con un div fijado a la izquierda del navegador, un ejemplo (usando javascript en lugar de css/html) está aquí: http://uservoice.com/demo div overlay sobre iframe

quiero ese widget para aparecer de forma nativa en la página y el contenido cargado a través de iFrame.

¿Alguna idea? No puedo hacer que el iFrame llene toda la página, y también que aparezca en la parte superior. He jugado con z-indexes sin suerte. Código de ejemplo:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

      <style> 
      #widget { 
       left: 0px; 
       position: absolute; 
       top: 50%; 
       display: block; 
       z-index:100001; 
       width: 25px; 
       } 
      #content { 
       z-index:1; 
       } 
      </style> 
</head> 
<body> 
    <div id="widget"> 
    widget 
    </div> 


    <iframe frameborder="0" id="content" src="http://www.google.com/" width="100%" height="100%"></iframe> 
</body> 
</html>

Fuente

2010-01-19 Peter Clark

Probé tu código usando ff3.5.7 en Ubuntu y parece funcionar bien. ¿Qué configuración estás usando? – Flatlin3

El elemento z-index no funciona en iframes. – Michael

Si no va a cargar dominios entonces usted podría simplemente cargar en el uso de la llamada ajax jquery http://docs.jquery.com/Ajax/load

$(document).ready(function() { 
    $("#content").load("page.html"); 
});

y reemplazo de su marco flotante con

<div id="content"></div>

Fuente

2010-01-19 16:18:13

brillante y fácil –

Usted probablemente necesite agregar margen: automático; a su iFrame o al div flotante. Esto hará que llene la pantalla al 100%.

Ejemplo:

.width { 
    position:absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    width:250px; 
    height:150px; 
    margin:auto; 
}

solucionarlo a la izquierda del navegador que puede utilizar:

margin:auto auto auto 0;

Buena suerte!

Fuente

2010-01-20 21:05:59 Joshua

Joshua: Gracias, funcionó :) – Gendaful

Puede envolver su iframe en un div con un bajo índice Z y luego colocar un div sobre él con un índice z más alto.

Fuente

2010-02-02 05:10:54 wilwaldon

Intenté con un iframe de video de YouTube, y no funcionó. –

Probado en Opera, Firefox y Rekonq. No funciona. – Michael

Funcionará solo lo que necesita para agregar posición absoluta en CSS para ambos elementos. :) –

Eso es "clickjacking", ¿o no?

Es poco probable que funcione a largo plazo, ya que los navegadores (con razón) ven esto como una amenaza a la seguridad que debe evitarse.

Fuente

2010-02-03 16:20:57 brianary

Esto funcionó para mí:

añadir el div superposición con un alto índice z y la posición absoluta
hacer el iframe también posicionado absoluta
añadir el iframe dentro de un div

El div con la superposición:

<div style="z-index:99;position:absolute;top:0;right:0"> 
    ...overlay html... 
</div>

El marco flotante:

<style> 
    iframe { 
    position: absolute; 
    border: none; 
    box-sizing: border-box; 
    width: 100%; 
    height: 100%; 
    } 
</style> 
<div> 
    <iframe src="http://..."> </iframe> 
</div>

Fuente

2014-12-02 11:51:24 miraculixx

con este código me sale una doble barra de desplazamiento a la derecha de la derecha. Uno para el sitio web y otro para el i-frame.

<style> 
    iframe { 
    position: absolute; 
    border: none; 
    box-sizing: border-box; 
    width: 100%; 
    height: 100%; 
    } 
</style> 
<div> 
    <iframe src="http://..."> </iframe> 
</div>

Fuente

2016-10-26 10:23:52

Respuesta

Cuestiones relacionadas