2012-04-11 15 views
2

Ich habe ein Problem. Ich arbeite an einer Vorlage, die aus einem zentralen div und einem iframe besteht. Das div sollte sich abhängig vom Inhalt des iframes dynamisch anpassen. Ich habe versucht andere Lösungen gefunden, ohne Ergebnisse. Ich verwende den folgenden HTML-Code: dynamisch auf iframe Inhalt ändernDynamische Iframe Höhe

<div id="site_content" style="position:relative; width:445px; height:500px;"> 

    <iframe id="mainframe" name="mainframe" onload="parent.adjustIFrameHeight();" FRAMEBORDER="0" scrolling="no" style="overflow:hidden; border:none;" src="http://www.letsapp.it/alecianetti/" width="445" height="600"></iframe> 

</div> 

würde ich die div (#site_content) wie die Größe neu. Ich habe versucht, diese Funktion aber ich bin nicht sehr erfahren im Umgang mit js und ähnlichen (ich studiere sich jetzt;)), damit ich weiß nicht, ob es sinnvoll ist oder nicht vollständig entsprechen

onload="parent.adjustIFrameHeight();" 

Ihnen eine Vorstellung zu geben, Das Ergebnis, ich verlinke Sie eine Demo-Website von ThemeForest Wave CV, die die Vorlage ist, die ich repliziere.

Kann mir jemand helfen?

+0

Haben Sie einen Blick auf diesen Link [http://stackoverflow.com/questions/6671275/iframe-height-adjust-not-working][1] [1]: http: //stackoverflow.com/questions/6671275/iframe-height-adjust-not-working –

+0

Hallo Phillip und danke für die Antwort. Es funktioniert jedoch überhaupt nicht. Andere Vorschläge? –

+0

Hinweis für alle: Für moderne Browser wird eine Sicherheitsüberprüfung bei domänenübergreifenden Problemen durchgeführt. Stellen Sie sicher, dass Sie in JavaScript denselben Wert von "document.domain" definieren, um den Fehler zu entfernen. – Raptor

Antwort

1

Ich habe es einfach ausprobiert!

<script type="text/javascript"> 
     function setIframeHeight(iframeName) { 
      //var iframeWin = window.frames[iframeName]; 
      var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null; 
      if (iframeEl) { 
      iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous 
      //var docHt = getDocHeight(iframeWin.document); 
      // need to add to height to be sure it will all show 
      var h = alertSize(); 
      var new_h = (h-148); 
      iframeEl.style.height = new_h + "px"; 
      //alertSize(); 
      } 
     } 

     function alertSize() { 
      var myHeight = 0; 
      if(typeof(window.innerWidth) == 'number') { 
      //Non-IE 
      myHeight = window.innerHeight; 
      } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
      //IE 6+ in 'standards compliant mode' 
      myHeight = document.documentElement.clientHeight; 
      } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { 
      //IE 4 compatible 
      myHeight = document.body.clientHeight; 
      } 
      //window.alert('Height = ' + myHeight); 
      return myHeight; 
     } 
    </script> 

</head> 
<body onload="setIframeHeight('ifr');"> 
<center> 
    <iframe id="ifr" src="yourdomain!" onload="parent.adjustIFrameHeight();" width="850px" scrolling="no" ></iframe> 
</center> 
</body> 
</html> 
+0

Danke Philipp. Ich habe diesen Fehler: Uncaught TypeError: Objekt [Objekt DOMWindow] hat keine Methode 'adjustIFrameHeight' –

+0

Sorry, ich habe den gleichen Fehler. Aber das Skript funktioniert grundsätzlich ?! –

+0

Ja, ich habe "parent.adjustIFrameHeight();" geändert mit "parent.setIFrameHeight();" und es funktioniert gut. Das Problem ist, dass jetzt die Höhe auf das höhere div festgelegt ist (es ist auf 800px fixiert). –