Größenanpassung für Iframe - Codebug

Hero · Post by **Hero** » Tue 26. Jul 2005, 03:32

Hallo zusammen!

Ich habe vor einiger Zeit mit Hilfe Pepe's Coppermine zum laufen bekommen:
http://peperkorn-online.de/iframe-artikelliste.phtml
http://www.gruleiru.de/phpwcms/index.php?bilder

Funktionierte auch wunderbar. Doch jetzt das Problem:
Die Gallery muss auf einen anderen Server umziehen:
http://gruleiru.gr.funpic.de/cpg/index.php

Also ran und URL geändert, aber wenn das mal so einfach wäre.
Mit der neuen Adresse öffnet ich ein ca 100px höhes Fenster.
Durch ausprobieren hab ich rausgefunden:

Code: Select all

<iframe onLoad="iFrameHeight();" 
src="http://www.gruleiru.de/cpg/index.php" 
scrolling="no" scroll="auto" 
id="iframename" name="iframename" 
marginwidth="0" marginheight="0" frameborder="0"
style="width:100%;" height="100">
</iframe>

funktioniert

Code: Select all

<iframe onLoad="iFrameHeight();" 
src="http://gruleiru.de/cpg/index.php" 
scrolling="no" scroll="auto" 
id="iframename" name="iframename" 
marginwidth="0" marginheight="0" frameborder="0"
style="width:100%;" height="100">
</iframe>

aber nicht. Möchte heißen, das Skript verlangt ein http://www.* vor der Adresse.
Da die Adresse http://www.gruleiru.gr.funpic.de/cpg/index.php leider ungültig ist stehe ich vor einem Problem.

Weis jemand die Rätsels Lösung?

Im übrigen: Der Header Code lautet:

Code: Select all

<script language="javascript">
<!--
function iFrameHeight() {
if(document.getElementById && !(document.all)) {
h = document.getElementById('iframename').contentDocument.body.scrollHeight;
document.getElementById('iframename').style.height = h;
}
else if(document.all) {
h = document.frames('iframename').document.body.scrollHeight;
document.all.iframename.style.height = h;
}
}
//-->
</script>

danke euch für die Hilfe!

gruß
Andreas

Pappnase · Post by **Pappnase** » Tue 26. Jul 2005, 04:36

sorry aber das script hat bisher noch nie jamand zum laufen bekommen!

Hero · Post by **Hero** » Tue 26. Jul 2005, 11:08

Wenn du auf meiner Seite gucken willst:
Mit de IE klappts wunderbar, Firefox stört sich leider nicht dran.

Dan war ich der erste?

pepe · Post by **pepe** » Tue 26. Jul 2005, 13:11

Also... ich bin mit der Lösung ganz zufrieden

Bekomme unter Windows auch deine Site in IE, FireFox und OPERA in einwandfreier Funktion und in voller Höhe angezeigt... was spricht für "private" Sites also gegen das Script

Daß es nicht auf meinem Mist gewachsen ist, sondern nur von mir in den Tips "beschrieben" wird, wurde an dieser Stelle ja schon ausgiebig diskutiert... aber das spricht doch nicht unbedingt gegen das Script, oder

Hero · Post by **Hero** » Tue 26. Jul 2005, 13:52

Komisch, mein Fuchs passt die Größe nicht an!?!
Auf jedenfall such ich noch verzweifelt nach einer lösung, da der umzug eigentlich schon abgeschlossen sein sollte!

Post by **flip-flop** » Mon 8. Aug 2005, 11:17

Mit dem FF funktioniert es bei mir auch nicht.
Aber es gibt eine Lösung für IE und FF. (Opera leider nicht).

Dieses JS-Script kommt in den Head-Bereich der Vorlage für den iFrame:

Code: Select all

<script language="javascript">
<!--
function calcHeight(){
//find the height of the internal page
var the_height= document.getElementById('iframename').contentWindow.document.body.scrollHeight+22; //hier einfach 22HE dazu und es passt ;)

  //change the height of the iframe
  document.getElementById('iframename').height=the_height;
}
//-->
</script>

mit diesem Teil wird der iFrame aufgerufen:

Code: Select all

<iframe onLoad="calcHeight();" 
src="index.php?seitenname" 
scrolling="no" scroll="auto"
id="iframename" name="iframename" 
marginwidth="0" marginheight="0" frameborder="0" 
style="width:600px;" height="1600px">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>

Für "seitenname" wird der Name der geframten Seite eingesetzt.
style="width:600px;" bestimmt die Breite des iFrames.
height="1600px" sicherheitshalber für Opera.

So berechnet auch der FF die Größe.
Das Beste daran ist, ein Aufruf einer anderen iFrame-Seite aus diesem iFrame heraus zeigt auch die richtige Größe. Zwar bleibt der Scrollbalken vom Browser bei einem Wechsel aus einem höheren IFrame in einen kleineren auf der alten Höhe stehen, aber der Content-Bereich wird richtig berechnet. (bei FF). Beim IE funktioniert auch der Browser-Scroll richtig.

Das Script kommt nicht von mir, sondern:
http://www.selfphp.de/forum/showthread. ... #post68655

ICH:
Habe das Problem mit sich widerholendem Inhalt auf einer größeren dreisprachigen Seite.
Die ganze Sache wird jetzt über einen hidden-Bereich mit iFrames gelöst. Zwar nicht so toll, aber es funktioniert. Und ich kann innerhab der iFrames verlinken, mit autom. Höhenanpassung ohne in der Navi die Kategorie zu verlassen.

1.2.5 CVS:
Die neu experim. Funktion artikel-id ist klasse und funktioniert auch aber es gibt noch keine relative Verlinkung aus einem Artikel zu einem Artikel ohne die Kategorie zu verlassen. Stell ich mir programmtechnisch auch ziemlich komplex vor, aber das wäre das Sahnehäubchen und würde dieses CMS in eine ganz neue Dimension bringen. (Schätze in einem Jahr würde es auf der c´t -CD mitgeliefert. Siehe JanaServer von Thomas Hauck).

Gruß Knut

jpsaenz · Post by **jpsaenz** » Sun 6. Nov 2005, 16:10

hi, die Suchfunktion hat mich zu diesem Thread gebracht, und Flip-Flops Script ist genau das, was ich brauche aber... ich habe immer noch ein kleines Problem: mit iframes möchte ich ein Photoalbum einbetten, welches aber auf einem Subdomain läuft, d.h. ich kann es nur extern einbinden:

Code: Select all

<iframe onLoad="calcHeight();"
src="http://fotos.jupixweb.de/cgi-bin/emAlbum.cgi"
scrolling="no" scroll="auto"
id="fotoframe" name="fotoframe"
marginwidth="0" marginheight="0" frameborder="0"
width="100%" height="700px">
</iframe>

und so funktioniert es nicht. Wenn ich anstatt

Code: Select all

src="http://fotos.jupixweb.de/cgi-bin/emAlbum.cgi"

in dem IFrame ein "interner" Part einbinde, so in der Art:

Code: Select all

src="index.php?irgendetwas"

funktioniert es problemlos. Als Fehlermeldung sagt der IE:

Code: Select all

[...]
Zeile: 18
Zeichen: 1
Fehler: Zugriff verweigert
[...]

Vielleicht könnt Ihr ein Blick darauf werfen: http://www.jupixweb.de/index.php?photos

Wäre toll, wenn jemand helfen könnte...

Danke!
Saludos,
Juan-Pablo

EDIT: ach ja, "Zeile 18" ist die Definition der Höhenvariable:

Code: Select all

var the_height=document.getElementById('fotoframe').contentWindow.document.body.scrollHeight+22;

pepe · Post by **pepe** » Sun 6. Nov 2005, 18:08

Hast du mal folgendes versucht:

src="http://www.fotos.jupixweb.de/cgi-bin/emAlbum.cgi"
.
.
.
.

Bei mir klappte das dann... also mit www.

Post by **flip-flop** » Sun 6. Nov 2005, 18:09

Hi jpsaenz,

sehr schönes Foto-Script. Ist es die Standard- oder Pro-Ausführung?

Ach ja, bei mir funktioniert Dein Album in FF 1.07, IE 5.5 / 6.0. und Opera 7.2. Oder wo lag der Fehler?

Gruß Knut

jpsaenz · Post by **jpsaenz** » Sun 6. Nov 2005, 19:20

@pepe: nein, das geht bei mir leider nicht...

@fli-flop: das ist die standard (freeware) Ausführung, ich finde auch, daß das ein klasse Script ist. Leider funktioniert es nicht, Du hast es zwar visualisieren können, weil ich statt height='1' height="700" angegeben habe

Code: Select all

<iframe onLoad="calcHeight();"
[...]
width="100%" height="700px">
</iframe>

aber die Höhe wird nicht verändert, die bleibt fest bei 700px. (übrigens habe ich es auch ohne jede Höhenangabe versucht, und mit "height="1"", wie im originalbeispiel, es geht auch nicht

chip_rider · Post by **chip_rider** » Sun 6. Nov 2005, 19:33

...IFRAME...
Dieser Skript funzt sehr gut.

Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none.

Code: Select all


<script type="text/javascript">

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe1", "myframe2", "myframe3", "myframe4", "myframe5"]


//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=getFFVersion>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers



function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight+45; 
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>

Aufruf des Skripts mit <iframe id="...." ....
Padding Verbesserung für: IE,FF,NS,...

Code: Select all

<iframe id="myframe1" src="...../index.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:600; display:none"></iframe>

MFG
chip_rider

jpsaenz · Post by **jpsaenz** » Sun 6. Nov 2005, 20:06

irgenwie scheint bei mir nicht richtig zu Laufen, ich bekomme immer "Zugriff Verweigert" wenn ich in dem IFrame eine externe Seite laden möchte - bei internen Verweisen geht alles ohne Probleme... Ist nicht wirklich tragisch, aber sehr ärgerlich...

pico · Post by **pico** » Mon 7. Nov 2005, 08:21

Hi

if your Content for the iFrame is on another URL, check that in your conf.inc.php

Code: Select all

$phpwcms["allow_remote_URL"]  = 1;        //0 = no remote URL in {PHP:...} replacement tag allowed, 1 = allowed

ist set proper!

also that your Host allow remute URL's

jpsaenz · Post by **jpsaenz** » Mon 7. Nov 2005, 20:20

@all: danke für Eure Antworten - klappt leider immer noch nicht...

bin ratlos...

Saludos,
Juan-Pablo

Post by **flip-flop** » Mon 7. Nov 2005, 21:05

Hi,
ich würde die Höhe auf die größtnötige Ausdehnung einstellen. Die "Usability" geht dadurch nicht verloren. Der Programmierer einer Seite macht sich häufig Gedanken um Dinge, die der normale User überhaupt nicht bemerkt.
Nicht so toll finde ich dagegen, dass es in dem Foto-Album keinen "Backlink" gibt. Das ist nervig beim Picken von einzelnen Bildern.

Gruß Knut