8
votes

superposition div sur iframe

Je fais un widget similaire aux widgets d'UserVoice, sauf que je souhaite que le contenu de la page soit dans une iframe plutôt que le widget apparaisse via JavaScript. Comment puis-je avoir une page complète (largeur / hauteur 100%) iframe avec une div fixée à gauche du navigateur, un exemple (utilisant JavaScript plutôt que CSS / HTML) est ici: http://uservoice.com/demo

Je souhaite que le widget apparaisse de manière natale sur la page, et que le contenu soit chargé via iframe.

Des idées? Je ne peux pas rendre l'iframe remplir la page entière et aussi avoir l'apparence sur le dessus. J'ai joué avec z-index à pas de chance. Exemple de code: xxx

html css iframe

2 commentaires

J'ai testé votre code à l'aide de FF3.5.7 sur Ubuntu et il semble fonctionner très bien. Quelle installation utilisez-vous?

La chose z-index ne fonctionne pas sur les iframes.

6 Réponses :

12
votes

Si vous ne chargez pas de Domaine croisé, vous pouvez simplement charger l'appel de JQuery Ajax http://docs.jquerery.com/ajax/load

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

0 commentaires

4
votes

Vous devez probablement ajouter de la marge: auto; à votre iframe ou à la div. Cela permettra de remplir l'écran 100%.

Exemple: P>

margin:auto auto auto 0;

0 commentaires

0
votes

Vous pouvez envelopper votre iframe dans un DIV avec un index z faible, puis posez un DIV sur celui-ci avec un index Z supérieur.

1 commentaires

Il ne fonctionnera que la chose que vous devez ajouter une position absolue en CSS pour les deux éléments. :)

6
votes

C'est " ClickJacking ", n'est-ce pas?

Rien n'est susceptible de fonctionner à long terme, car les navigateurs (à juste titre) voient cela comme une menace de sécurité à éviter.

0 commentaires

0
votes

Cela a fonctionné pour moi:

Ajoutez la superposition DIV avec un indice Z élevé et une position absolue
Faites que l'iframe a également positionné absolu
Ajoutez l'iframe à l'intérieur d'un div
la DIV avec la superposition: xxx
l'iframe: xxx

0 commentaires

1
votes

Avec ce code, je reçois une double barre de défilement à droite à droite. Un pour le site Web et un pour la marque I.

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

0 commentaires