Modul iFrame mit automatischer Größenanpassung

halousi · Beitrag von **halousi** » Mi 21. Sep 2005, 08:32

hallo,
habe ein modul gebastelt von dem ich glaube daß es vieleicht dem ein oder anderen weiterhelfen kann.

mit diesem modul ist es möglich die größe eines iFrames an den inhalt der geladenen Seite anzupassen (also keine height="xx" angabe erforderlich.

hier also der quelltext:

CODE FÜR DEN HEAD DES LAYOUTS:

Code: Alles auswählen

<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=["myframe"]

//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=parseFloat(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; 
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>

MODUL INPUT:

Code: Alles auswählen

$moddir         =   "iframedata/"; 

// VALUES 
$sky_selectedfile   =   "CMS_VALUE[4000]"; 
$sky_iframe_width   =    "CMS_VALUE[4001]"; 
$sky_iframe_height      =    "CMS_VALUE[4002]"; 
$sky_iframe_border      =    "CMS_VALUE[4003]"; 
$sky_iframe_style       =    "CMS_VALUE[4004]";   // not used till yet 
$sky_iframe_class       =    "CMS_VALUE[4005]";   // not used till yet 
$sky_iframe_httpinput   =    "CMS_VALUE[4006]"; 

// VARIABLES 
$sky_selectedfile2   =   "CMS_VAR[4000]"; 
$sky_iframe_width2   =    "CMS_VAR[4001]"; 
$sky_iframe_height2     =    "CMS_VAR[4002]"; 
$sky_iframe_border2     =    "CMS_VAR[4003]"; 
$sky_iframe_style2      =    "CMS_VAR[4004]";   // not used till yet 
$sky_iframe_class2      =    "CMS_VAR[4005]";   // not used till yet 
$sky_iframe_httpinput2  =    "CMS_VAR[4006]";    



// starting Modul Options Table 
echo "<table cellspacing=\"0\" cellpadding=\"10\" border=\"0\">"; 


// ################################################################################################ 
//  START FileChoose 
// ################################################################################################ 

/* based on contenido internal upl function */ 
function sky_listdir_recursive ($currentdir, $startdir=NULL, $files=array(), $depth=-1, $pathstring="") 
{ 
    $depth++; 

    $unsorted_files = array(); 

    if (chdir ($currentdir) == false) 
    { 
       return; 
    } 

    // remember where we started from 
    if (!$startdir) { 
        $startdir = $currentdir; 
    } 
    $d = opendir ("."); 

    //list the files in the dir 
    while ($file = readdir ($d)) { 
        if ($file != ".." && $file != ".") { 
                $unsorted_files[] = $file; 
        } 
    } 
    if (is_array($unsorted_files)) sort($unsorted_files); 
    $sorted_files = $unsorted_files; 

    if(is_array($sorted_files)) { 
        foreach ($sorted_files as $file) { 
            if ($file != ".." && $file != ".") { 

                if ((filetype(getcwd()."/".$file) == "dir") && 
                    (opendir(getcwd()."/".$file) !== false)) { 
                    $a_file['name']  = $file; 
                    $a_file['depth'] = $depth; 
                    $a_file['pathstring']  = $pathstring.$file.'/';; 

                    $files[] = $a_file; 
                    // If $file is a directory take a look inside 
                    $files = sky_listdir_recursive (getcwd().'/'.$file, getcwd(), $files, $depth, $a_file['pathstring']); 
                } else { 
                    // If $ file is not a directory then do nothing 
                    $a_file['name']  = $file; 
                    $a_file['depth'] = $depth; 
                    $a_file['pathstring']  = $pathstring; 

                    $files[] = $a_file;                    
                } 
            } 
        } 
    } 

    closedir ($d); 
    chdir ($startdir); 
    return $files; 
} 



echo "  <tr valign=\"top\"> 
          <td class=\"text_medium\">Datei ausw&auml;hlen:</td> 
          <td class=\"text_medium\"> 
            <select class=\"text_medium\" name=\"".$sky_selectedfile2."\">"; 
            
if ( $sky_selectedfile = "--KEIN--" ) 
{ 
   echo "        <option value=\"--KEIN--\" selected=\"selected\">-- KEIN --</option>";            
} 
else 
{ 
   echo "        <option value=\"--KEIN--\">-- KEIN --</option>";            
} 
            

$sql = 'SELECT frontendpath FROM ' . $cfg["tab"]["clients"].' WHERE idclient = "'.$client.'"'; 
$db->query( $sql ); 
$db->next_record(); 
$l_upldir = $db->f("frontendpath"); 

function blub ( $vid , $vtxt) 
{ 
echo '<option value="'.$vid.'">'.$vtxt.'</option>'; 
} 


$sky_uploaddir = $cfgClient[$client]["upl"]["path"] . $moddir; 
$sky_files = sky_listdir_recursive ( $sky_uploaddir , getcwd() ); 


if ( is_array($sky_files) ) 
{ 
   // Array ( [0] => Array ( [name] => cms [depth] => 0 [pathstring] => cms/ ) 
   while (list($lkey, $lvalue) = each ($sky_files)) 
   { 
      if ( file_exists($sky_uploaddir.$lvalue['pathstring'].$lvalue['name'])) 
        { 
         if ( $sky_selectedfile == $lvalue['pathstring'].$lvalue['name'] ) 
         { 
            echo '<option value="'.$lvalue['pathstring'].$lvalue['name'].'" selected="selected">'.$lvalue['pathstring'].$lvalue['name'].'</option>'; 
         } 
         else 
         { 
            echo '<option value="'.$lvalue['pathstring'].$lvalue['name'].'">'.$lvalue['pathstring'].$lvalue['name'].'</option>';          
         } 
      } 
   } 
} 


echo "      </select> 
     </td> 
        </tr>"; 
        
// ################################################################################################        
//   End File Choose 
// ################################################################################################ 

// ################################################################################################ 
//   START HTTPInput 
// ################################################################################################ 

echo "  <tr valign=\"top\">"; 
echo "    <td class=\"text_medium\">HTTP Link:</td>"; 
echo "    <td class=\"text_medium\">"; 

echo "      <input type=\"text\" class=\"text_medium\" name=\"".$sky_iframe_httpinput2."\" value=\"".$sky_iframe_httpinput."\"> ";    
echo "       <br>"; 
echo "        Hinweis: HTTP-Link wird nur ber&uuml;cksichtigt, wenn als Dokument <b>-- KEIN --</b> ausgew&auml;hlt wurde !"; 
echo "    </td>"; 
echo "  </tr>"; 

// ################################################################################################ 
//   END HTTPInput 
// ################################################################################################ 


// ################################################################################################ 
//   START IFRAME-WIDTH 
// ################################################################################################ 
echo "  <tr valign=\"top\">"; 
echo "    <td class=\"text_medium\">IFRAME-Width:</td>"; 
echo "    <td class=\"text_medium\">"; 

echo "      <input type=\"text\" class=\"text_medium\" name=\"".$sky_iframe_width2."\" value=\"".$sky_iframe_width."\"> ";    

echo "    </td>"; 
echo "  </tr>"; 
// ################################################################################################ 
//   END IFRAME-WIDTH 
// ################################################################################################ 

// ################################################################################################ 
//   START IFRAME-HEIGHT 
// ################################################################################################ 
// Auto
// ################################################################################################ 
//   END IFRAME-HEIGHT 
// ################################################################################################ 

// ################################################################################################ 
//   START IFRAME-BORDER 
// ################################################################################################ 
echo "  <tr valign=\"top\">"; 
echo "    <td class=\"text_medium\">IFRAME-Border:</td>"; 
echo "    <td class=\"text_medium\">"; 

echo "      <input type=\"text\" class=\"text_medium\" name=\"".$sky_iframe_border2."\" value=\"".$sky_iframe_border."\"> ";    

echo "    </td>"; 
echo "  </tr>"; 
// ################################################################################################ 
//   END IFRAME-BORDER 
// ################################################################################################ 

// closing Module Options Table 
echo "</table>";

MODUL OUTPUT:

Code: Alles auswählen

<?php 

// Lese ausgewählte Datei aus. 
$moddir      =   "upload/iframedata/"; 
$sky_selected_file    = "CMS_VALUE[4000]"; 
$sky_iframe_width   = "CMS_VALUE[4001]"; 
$sky_iframe_heiht       = "CMS_VALUE[4002]"; 
$sky_iframe_border      = "CMS_VALUE[4003]"; 
$sky_iframe_style       = "CMS_VALUE[4004]";   // not used till yet 
$sky_iframe_class       = "CMS_VALUE[4005]";   // not used till yet 
$sky_iframe_httpinput   = "CMS_VALUE[4006]"; 



// Arbeite Einstellungsvariabeln ab 

// ################################################################################### 
// START - IFRAME-WIDTH 
if ( strlen($sky_iframe_width) > 0 ) 
{ 
   $ls_iframe_width = $sky_iframe_width; 
} 
else 
{ 
   $ls_iframe_width = "100%"; 
} 
// END - IFRAME-WIDTH 
// ################################################################################### 

// ################################################################################### 
// START - IFRAME-HEIGHT 
if ( strlen($sky_iframe_height) > 0 ) 
{ 
   $ls_iframe_height = $sky_iframe_height; 
} 
else 
{ 
   $ls_iframe_height = "100%"; 
} 
// END - IFRAME-HEIGHT 
// ################################################################################### 

// ################################################################################### 
// START - IFRAME-BORDER 
if ( strlen($sky_iframe_border) > 0 ) 
{ 
   $ls_iframe_border = $sky_iframe_border; 
} 
else 
{ 
   $ls_iframe_border = "1"; 
} 
// END - IFRAME-BORDER 
// ################################################################################### 


// check for NO FILE Selected 

if ( $sky_selected_file != "--KEIN--" ) 
{ 
   // using selected file 

   // überprüfe ob ausgewählte Datei noch existiert 
   if ( file_exists( $moddir.$sky_selected_file ) ) 
   { 

      // erzeuge IFrame Ausgabecode 
      echo '<iframe src="'.$moddir.$sky_selected_file.'" width="'.$ls_iframe_width.'" height="'.$ls_iframe_height.'" frameborder="'.$ls_iframe_border.'">'; 
      echo '<p>Ihr Browser unterstützt keine IFrames. Bitte aktualisieren Sie ihren Browser.</p>'; 
      echo '</iframe>'; 
   } 
   else 
   { 
      // using HTTP Input 
      echo '<iframe src="'.$sky_iframe_httpinput.'" width="'.$ls_iframe_width.'" height="'.$ls_iframe_height.'" frameborder="'.$ls_iframe_border.'">'; 
      echo '<p>Ihr Browser unterstützt keine IFrames. Bitte aktualisieren Sie ihren Browser.</p>'; 
      echo '</iframe>'; 
   } 
    
} 
else 
{ 
   // using HTTP Input 
   echo '<iframe id="myframe" src="'.$sky_iframe_httpinput.'" scrolling="no" marginwidth="0" marginheight="0" vspace="5" hspace="0" width="100%" height="'.$ls_iframe_height.'" frameborder="'.$ls_iframe_border.'">'; 
   echo '<p>Ihr Browser unterstützt keine IFrames. Bitte aktualisieren Sie ihren Browser.</p>'; 
   echo '</iframe>'; 
} 
?>

bitte darauf achten dass die iframe id="iframe" im layout und modul übereinstimmen.

würde mich über ein feedback freuen

viel spaß damit

Beitrag von **emergence** » So 25. Sep 2005, 14:57

schaut nicht so unintressant aus...

hab jetzt zwar nicht die zeit zum testen, aber was passiert wenn javascript deaktiviert wurde ?

halousi · Beitrag von **halousi** » Mo 26. Sep 2005, 08:40

dann greift es auf die voreingestellte höhe, in deisem fall 100%, zurück.

gruß halousi

dampfradio · Beitrag von **dampfradio** » So 6. Nov 2005, 19:35

@halousi

Also bei mir funktioniert es nicht.
Sind auch einige (Flüchtigkeits-)Fehler im Code.
Schade. Dein Script wäre genau das, was ich schon lange suche..

halousi · Beitrag von **halousi** » Mo 7. Nov 2005, 08:41

hallo,
hast du die iframe id richtig eingestellt?
-var iframeids=["myframe"] (im head)
- id="myframe" (im modul, letzter block)

es funktioniert im übrigen nur mit inhalten die auch auf deinem server lieger (hatte ich vergessen zu erwähnen

). sonst kann das script die größe nicht berechnen.

im übrigen ist es auch möglich den head-bereich in ein neues modul-output zu kopieren und im layout einen container im head anzulegen.

welche con-version benutzt du? ab version 4.6 musst du den bereich

Code: Alles auswählen

height="'.$ls_iframe_width.'

im output entfernen, er verursacht einen fehler.

gruß halousi

halousi · Beitrag von **halousi** » Mo 7. Nov 2005, 09:36

ok, hier das überarbeitete modul "Auto iFrame" für con 4.6.

Verschoben nach: http://contenido.org/forum/viewtopic.php?p=59854#59854

Viele Grüße,
halousi

dampfradio · Beitrag von **dampfradio** » Mo 7. Nov 2005, 10:25

@halousi

Dann weiss ich jetzt auch, warum es nicht funkioniert..
Die Inhalte, die ich anzeigen will, liegen auf einem anderen Server..
Kann man das irgendwie hinbiegen, dass es auch bei externen URL funktioniert?

halousi · Beitrag von **halousi** » Mo 7. Nov 2005, 10:39

nein, leider nicht. das script benötigt das dokument lokal zur berechnung der größe.
es gibt noch eine weitere möglichkeit externe seiten einzubinden. ich habe es noch nicht gestestet, aber vieleicht hilft dir das weiter:

http://www.dynamicdrive.com/dynamicinde ... ontent.htm

gruß halousi

Beitrag von **HerrB** » Mo 7. Nov 2005, 12:00

ok, hier das überarbeitete modul "Auto iFrame" für con 4.6.

Kannst Du das bitte nochmal separat und komplett bei Module V4.6 einstellen (und den Code hier durch einen Hinweis ersetzen)? Danke.

Was ich nicht ganz verstanden habe: Die Größe des iFrame sollte doch eigentlich in Abhängigkeit von der Größe des Client-Browserfensters bestimmt werden, oder? Könnte man das nicht mit ein wenig JavaScript realisieren?

Gruß
HerrB

halousi · Beitrag von **halousi** » Mo 7. Nov 2005, 12:15

ok, werd ich machen.

Was ich nicht ganz verstanden habe: Die Größe des iFrame sollte doch eigentlich in Abhängigkeit von der Größe des Client-Browserfensters bestimmt werden, oder? Könnte man das nicht mit ein wenig JavaScript realisieren?

ich nutze für die größenanpassung das IFrame SSI script von dynamicdrive.com. dazu steht fogender hinweis:

*All external pages loaded into the iframe must be from the same domain as the page the iframe tag is inserted in. Setting the iframe's src to an external site such as "http://www.google.com" will not work, since the script cannot probe and detect the height of pages from external domains.

ich muss ganz ehrlich gestehen, dass ich mit javascript nicht sonderlich viel am hut habe. aber wenn das jemand erweitern möchte, gerne. ich denke aber das es wohl nicht möglich ist, sonst wäre das hier sicherlich berücksichtigt.
aber wie heisst es so schön: "geht nicht, gibt's nicht"
das ist also ein aufruf an alle experimentierfreudingen javascripter

Dave.82 · Beitrag von **Dave.82** » Mo 7. Nov 2005, 19:06

Hallo halousi,

kannst Du mir erklären wo ich den

CODE FÜR DEN HEAD DES LAYOUTS:

einsetzen muss?

In meine Contenido Layout Datei oder in den Head der Iframedatei?

halousi · Beitrag von **halousi** » Di 8. Nov 2005, 08:28

hallo, der head-bereich muss natürlih ins layout. du kannst den code aber wie hier http://contenido.org/forum/viewtopic.php?p=59854#59854 beschrieben auch in ein modul-output packen und dann in deinem layout einfach einen cms_container im head anlegen.

nimm bitte die neuere version für 4.6 (funktioniert auch unter älteren versionen).

gruß halousi

Dave.82 · Beitrag von **Dave.82** » Di 8. Nov 2005, 17:58

bei mir funktioniert das Modul leider nicht.

- Version 4.4.5
- "myframe" in head und modul-output angegeben
- javascript aktiviert.
- Iframe auf selbem server

Wenn ich bei bei width 100% angebe, ist der Iframe nur etwa 100 pixel hoch und 100%breit. sobald ich bei width zb. 2000 angebe, wird die Höhe des Iframes größer. Obwohl width doch eigentlich für die Breite zuständig ist?! Es passt sich aber gar nicht dem Inhalt des Iframes an.

halousi · Beitrag von **halousi** » Mi 9. Nov 2005, 08:49

hallo,
bitte versuch mal das modul für 4.6. (siehe weiter oben)

Wenn ich bei bei width 100% angebe, ist der Iframe nur etwa 100 pixel hoch und 100%breit. sobald ich bei width zb. 2000 angebe, wird die Höhe des Iframes größer. Obwohl width doch eigentlich für die Breite zuständig ist?! Es passt sich aber gar nicht dem Inhalt des Iframes an.

da hat sich ein dreher im iFrame eingeschlichen...

height="'.$ls_iframe_width.'"

muss natürlich

Code: Alles auswählen

height="'.$ls_iframe_height.'"

lauten.

sorry, hab ich überstolpert.

Dave.82 · Beitrag von **Dave.82** » Mi 9. Nov 2005, 11:03

die Version für 4.6 funktioniert bei meinem 4.4.5.
die Version für 4.4.5 allerdings nicht.

Ich Danke Dir für das coole Modul!

Ein Problem habe ich aber noch:
mein forum ist nun mit Deinem IframeModul eingebunden.
Wenn ich innerhalb des Forums navigiere, z.B einen thread öffne, der ja mehr height braucht als die Forenstartseite, ändert sich die größe des Iframes nicht mit. D.H. die Größe passt nicht.

Kann man dass irgendwie im Modul ändern, dass der bei jeder aktivität im IFrame die Größe neu berechnet?

Ansonsten Daumen hoch!

EDIT: Eine Frage noch: Wenn java deaktiviert ist greift es auf 100% zu sagst Du. Ist das im Output die Angaben width"100%" height="100%"?
Die könnte ich also auch problemlos erhöhen?