[JavaScript/HTML] iframe Height = με το content height;

SlackulatoR · 12 Ιανουαρίου 2012

Καλησπέρα,

Φτιάχνω ένα site, και χρησιμοποιώ ένα frame για να φορτώνω κάποια html, για παράδειγμα το news section είναι html και το φορτώνω στο main html μέσω του iframe.

Το θέμα είναι πως θέλω το height του iframe να δίνεται με δυναμικό τρόπο μέσω javascript φαντάζομαι...

Όσα scripts δοκίμασα δεν λειτούργησαν, εκτός αν έκανα κάτι λάθος.

Καμιά βοήθεια;

Επεξ/σία 12 Ιανουαρίου 2012 από SlackulatoR

TheELF · 12 Ιανουαρίου 2012

http://www.insomnia.gr/topic/433011-html-div-expand-scroll-%CE%BA%CF%84%CE%BB-%CE%BA%CF%84%CE%BB/page__pid__4501476#entry4501476

Δες εδώ απλά και εσύ στο μεσαίο πρέπει να βάλεις ένα από αυτά.

SlackulatoR · 12 Ιανουαρίου 2012

Δεν ξέρω τι κάνω λάθος αλλά δεν δουλεύει σωστά ούτε τώρα.

Στο site έχω ένα main table με 100% height. To div με το iframe βρίσκονται στην τελευταία σειρά.

Αν δώσω height 100% απλά ξεπερνά το height της οθόνης και πρέπει να κάνω scroll, επειδή πάνω από το iframe υπάρχουν άλλα πράγματα(header). Αν υπάρχει μόνο το iframe(χωρίς header κτλ) το 100% το καταλαβαίνει σωστά.

Επίσης αν βάλω το height του iframe να ισούτε με το height της σελίδας που φορτώνει σε pixels λειτουργεί σωστά, γι αυτό ζήτησα javascript.

edit:

Βρήκα αυτό σε javascript αλλά δεν μου δουλεύει...το height του iframe απλά δεν αλλάζει:

>
document.getElementById('mainFrame').height = document.getElementById('mainFrame').contentWindow.document.body.scrollHeight + "px";

TheELF · 12 Ιανουαρίου 2012

Δεν δίνεις μια το λινκ για την σελίδα ή τον κώδικα να σε καταλάβουμε τι λες;

Αν έχεις div μέσα σε table τότε λογικό να μην δουλεύει σωστά αφού στο table όλα τα κελιά μια σειράς πρέπει να είναι ίδιες(ή κάνω λάθος; )

SlackulatoR · 12 Ιανουαρίου 2012

Τελικά έκανα ξανά το table, βάζοντας παντού 100% height και δούλεψε αυτή τη φορά...

Περίεργο, ευχαριστώ πάντως.

_tasos · 12 Ιανουαρίου 2012

Είχα και εγώ το ίδιο θέμα και το έλυσα με javascript.

Μέσα στο HTML τι ύψος δίνεις αρχικά στο iframe; Αν το περιεχόμενο του iframe θέλει μεγαλύτερο ύψος (τελικά) δεν κρύβονται κάποια από τα περιεχόμενα του iframe;

SlackulatoR · 12 Ιανουαρίου 2012

Δίνω σε html, body 100%, μετά στο table 100%, μετά στο td που βρίσκεται μέσα το iframe 100% και τέλος 100% στο iframe. Απλά θέλει και margin:0.

Δες τον κώδικα δουλεύει μια χαρά, χωρίς javascript.

Το μόνο πρόβλημα που παρατήρησα είναι πως αν μικρύνεις το παράθυρο υπερβολικά χάνονται τα scrollers του iframe.

><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html,body{
height:100%;
overflow:hidden;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>

<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td valign="top"><p>HEADER LOGO</p>
   <p>INSOMNIA.GR IFRAME TESTING</p>
   <p>EXTRA TEXT HERE</p></td>
 </tr>
 <tr>
   <td height="100%" valign="top"><iframe src="http://www.insomnia.gr" width="100%" height="100%" frameborder="0"></iframe></td>
 </tr>
</table>
</body>
</html>

thanasis00 · 12 Ιανουαρίου 2012

Το μόνο πρόβλημα που παρατήρησα είναι πως αν μικρύνεις το παράθυρο υπερβολικά χάνονται τα scrollers του iframe.

δώσε όπου χρειάζεται στα css min-width και min-height, για να έχεις ένα ελάχιστο πλάτος και ύψος, και να μη χάνονται όταν μικραίνει το παράθυρο.

SlackulatoR · 12 Ιανουαρίου 2012

Ναι δεν δουλεύει. Αν δεις στο dreamweaver, το iframe είναι ένα γκρι παραλληλόγραμμο.

Αν μικρύνω το browser window πιο πολύ από το ύψος του παραλληλόγραμμου(και ας έχει 100% height) τότε χάνεται η scrollbar...

_tasos · 13 Ιανουαρίου 2012

Δίνω σε html, body 100%, μετά στο table 100%, μετά στο td που βρίσκεται μέσα το iframe 100% και τέλος 100% στο iframe. Απλά θέλει και margin:0.

Δες τον κώδικα δουλεύει μια χαρά, χωρίς javascript.

Το μόνο πρόβλημα που παρατήρησα είναι πως αν μικρύνεις το παράθυρο υπερβολικά χάνονται τα scrollers του iframe.

....

Στο παράδειγμα σου το iframe βγάζει scroll bar, κάτι που δεν ήθελα στη δική μου περίπτωση. Anyway, thanks για την απάντηση

SlackulatoR · 13 Ιανουαρίου 2012

Μπορείς να την αφαιρέσεις την μπάρα, βρήκα και javascript που σκρολάρει μόνο με mousewheel.

Το δίνεις στο head της σελίδας που φορτώνει το iframe και στο iframe δίνεις scrolling=no.

><script type="text/javascript">
/** This is high-level function.
* It must react to delta being more/less than zero.
*/
function handle(delta) {
var d=delta*-10;
window.scrollBy(0,d);
}

/** Event handler for mouse wheel event.
*/
function wheel(event){
       var delta = 0;
       if (!event) /* For IE. */
               event = window.event;
       if (event.wheelDelta) { /* IE/Opera. */
               delta = event.wheelDelta/120;
               /** In Opera 9, delta differs in sign as compared to IE.
                */
               if (window.opera)
                       delta = -delta;
       } else if (event.detail) { /** Mozilla case. */
               /** In Mozilla, sign of delta is different than in IE.
                * Also, delta is multiple of 3.
                */
               delta = -event.detail/3;
       }
       /** If delta is nonzero, handle it.
        * Basically, delta is now positive if wheel was scrolled up,
        * and negative, if wheel was scrolled down.
        */
       if (delta)
               handle(delta);
       /** Prevent default actions caused by mouse wheel.
        * That might be ugly, but we handle scrolls somehow
        * anyway, so don't bother here..
        */
       if (event.preventDefault)
               event.preventDefault();
event.returnValue = false;
}

/** Initialization code. 
* If you use your own event management code, change it as required.
*/
if (window.addEventListener)
       /** DOMMouseScroll is for mozilla. */
       window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
</script>

Σύνδεση

[JavaScript/HTML] iframe Height = με το content height;

Προτεινόμενες αναρτήσεις

SlackulatoR

TheELF

SlackulatoR

TheELF

SlackulatoR

_tasos

SlackulatoR

thanasis00

SlackulatoR

_tasos

SlackulatoR

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση