Overlay div über iframe

Ich mache ein Widget ähnlich wie die uservoice Widgets, außer ich möchte den Inhalt der Seite in einem iFrame sein, anstatt das Widget über Javascript angezeigt werden. Wie kann ich eine ganze Seite (Breite/Höhe 100%) iFrame mit einem div nach links des Browsers festgelegt haben, ein Beispiel (mit Hilfe von JavaScript, anstatt css/html) ist hier: http://uservoice.com/demo Overlay div über iframe

Ich will das Widget nativ auf der Seite erscheinen und der Inhalt über iFrame geladen werden.

Irgendwelche Ideen? Ich kann nicht machen, dass der iFrame die ganze Seite ausfüllt, und auch das Erscheinen oben. Ich habe mit Z-Indizes gespielt, um kein Glück zu haben. Code-Beispiel:

<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>

Quelle

2010-01-19 Peter Clark

Ich habe Ihren Code mit ff3.5.7 auf Ubuntu getestet und es scheint gut zu funktionieren. Welche Einrichtung verwendest du? – Flatlin3

Das Z-Index-Ding funktioniert nicht auf Iframes. – Michael

Wenn Sie nicht Cross-Domain-Laden dann laden Sie könnten nur in Verwendung Sie Jquery Ajax-Aufruf http://docs.jquery.com/Ajax/load

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

und ersetzen Sie Ihre iframe mit

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

Quelle

2010-01-19 16:18:13

brillant und einfach –

Wahrscheinlich muss Rand hinzugefügt werden: auto; zu deinem iFrame oder dem schwebenden div. Dadurch wird es den Bildschirm 100% füllen.

Beispiel:

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

Um es auf der linken Seite des Browsers zu beheben Sie verwenden können:

margin:auto auto auto 0;

Viel Glück!

Quelle

2010-01-20 21:05:59 Joshua

Joshua: Danke Mann, es hat funktioniert :) – Gendaful

Sie können Ihren iframe in ein div mit einem niedrigen Z-Index und dann ein div mit einem höheren z-index darüber legen.

Quelle

2010-02-02 05:10:54 wilwaldon

Versucht, dass mit einem Youtube-Video-iframe, und es hat nicht funktioniert. –

Getestet auf Opera, Firefox und Rekonq. Funktioniert nicht. – Michael

Es funktioniert nur das Ding ist, müssen Sie die Position absolut in CSS für beide Elemente hinzufügen. :) –

Das ist "clickjacking", oder?

Nichts wird langfristig funktionieren, da Browser (zu Recht) dies als Sicherheitsbedrohung betrachten, die verhindert werden soll.

Quelle

2010-02-03 16:20:57 brianary

Das ist für mich gearbeitet:

das Overlay div mit einem hohen Z-Index und die absolute Position
die iframe machen auch absolute hinzufügen positioniert
die iframe innerhalb eines div hinzufügen

Das Div mit der Überlagerung:

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

Der iframe:

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

Quelle

2014-12-02 11:51:24 miraculixx

mit diesem Code bekomme ich eine doppelte Scrollbalken auf der rechten Seite auf der rechten Seite. Eins für die Website und eins für das i-frame.

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

Quelle

2016-10-26 10:23:52

Overlay div über iframe

Antwort

Verwandte Themen