Full height iframe με javascript;

SlackulatoR · 10 Φεβρουαρίου 2012

Καλησπέρα, γνωρίζει κανείς πως μπορώ να κάνω re-size το iframe το οποίο το έχω μέσα σε table, σύμφωνα με το height της σελίδας που φορτώνει;

Για παράδειγμα αν το 1.html έχει 1000px height θέλω το iframe και το table να κάνουν resize και να μπορώ να scrollάρω το main body, και όχι το iframe.

Αυτή τη στιγμή το έχω καταφέρει με ένα jquery που βρήκα αλλά δεν λειτουργεί στον IE 6-8 που το δοκίμασα(βασικά κάνει resize αλλά δεν υπάρχει η scrollbar στο main body(index.html)

Xenobius · 11 Φεβρουαρίου 2012

Εγώ θα έβαζα το main body σε class πχ mainbody

>
<div class="mainbody">
  bla bla bla
    <iframe>...</iframe>
    <table>...</table>

  bla bla bla
</div>

και θα το πειραζα στο css μετα

>
.mainbody{

position: absolute;
height: 500px;
width: 1000px;
overflow: auto;
}

SlackulatoR · 11 Φεβρουαρίου 2012

Μα έτσι δεν θα είναι πάντα 500px; Εγώ θέλω να αλλάζει σύμφωνα με τo height του html που εισάγεται στο iframe.

Xenobius · 11 Φεβρουαρίου 2012

To overflow που ειναι στο auto σου δινει τη δυνατότητα αν το το html σου που ειναι μεσα στην class αυτή ξεπεράσει τα 500px height να το κάνει scrollable.

Οπότε ειναι σαν να ρυθμιζεις το viewable παραθυρο σου και ότι είναι μεγαλύτερο απο το height σου να θέλει scroll για να συνεχίσεις.

SlackulatoR · 11 Φεβρουαρίου 2012

OK αλλά ούτε αυτό λειτουργεί διότι:

Στο table έχω:

--------------

| 1) Header |

| 2) Menu |

| 3) iframe |

| 4) Footer |

--------------

Το iframe δηλαδή είναι μέσα σε td row.

Γνωρίζει κανείς πως μπορεί το iframe height να γίνει resize μέσω javascript;

Βρήκα αυτό αλλά δεν λειτουργεί στον Chrome. Σε firefox/ie δουλεύει κανονικά.

><script type="text/javascript">
function iSize(){
document.getElementById('mainFrame').height = document.getElementById('mainFrame').contentWindow.document.body.scrollHeight + "px";
}
</script>

Ούτε το contentDocument.documentElement(αντί για contentWindow.document.body) δουλεύει στον Chrome...

Καμιά ιδέα;

Επεξ/σία 11 Φεβρουαρίου 2012 από SlackulatoR

dark_banishing · 12 Φεβρουαρίου 2012

Το iframe έχει περιεχόμενο από το δικό σου domain ή από ξένο ?

SlackulatoR · 12 Φεβρουαρίου 2012

Δικό μου. Τελικά ανεβάζοντας τα αρχεία στον server λειτούργησε το script(τοπικά λειτουργούσε μόνο σε Firefox/IE), οπότε όλα οκ. Έχει ένα θέμα με το px height στο τέλος(μόνο στον chrome φαίνεται gg) αλλά δεν χάλασε και ο κόσμος.

Επίσης άλλο ένα θέμα είναι ότι πρώτα φορτώνει το περιεχόμενο του iframe και μετά τρέχει το script...που έχει ως αποτέλεσμα μερικές φορές να αργεί να τρέξει το script(και έτσι δεν φαίνεται το περιεχόμενο για μερικά δευτερόλεπτα).

Την function την τρέχω στο onload του iframe, υπάρχει πιο σωστός τρόπος;

><iframe src="main.html" frameborder="0" scrolling="no" onload="iSize()"></iframe>

bikey77 · 14 Φεβρουαρίου 2012

Κάνε το εξής:

Στη σελίδα που περιέχει το iframe (έστω ότι το έχεις ονομάσει ifrm)

><body onload="setIframeHeight('ifrm');" onresize="setIframeHeight('ifrm');">

Και το function για το κατάλληλο sizing/resizing:

>
<script type="text/javascript"> 

function setIframeHeight(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 h = alertSize();
 var new_h = (h-120);
 iframeEl.style.height = new_h + "px";
 }
}

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>

Δοκιμασμένο και λειτουργεί παντού σωστά.

Επεξ/σία 14 Φεβρουαρίου 2012 από bikey77

SlackulatoR · 14 Φεβρουαρίου 2012

Δύο function χρειάζεται στον παραπάνω κώδικα;

Επίσης τα iframeName και iframeEl χρειάζονται αλλαγή;

bikey77 · 14 Φεβρουαρίου 2012

Ονομάζεις όπως θέλεις το iframe σου (πχ ifrm) και όταν καλείς τη συνάρτηση περνάς το όνομα σα παράμετρο, όπως σου έχω γράψει και παραπάνω.

><body onload="setIframeHeight('ifrm');" onresize="setIframeHeight('ifrm');">

SlackulatoR · 15 Φεβρουαρίου 2012

Αυτό σε εμένα τουλάχιστον δεν λειτουργεί εκτός αν έκανα κάτι λάθος. Και τον κώδικα που χρησιμοποιώ ο οποίος είναι δύο γραμμές και κάνει το ίδιο, εάν τον καλέσω στο body τότε κάθε σελίδα έχει το height της πρώτης. Αν το onload το γράψω στις παραμέτρους του iframe τότε λειτουργεί κανονικά.

drumforhim · 21 Φεβρουαρίου 2012

αυτο φιλε μου μπορεις να το κανεις με css.

>
iframe{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
}

αφου ομως έχεις βαλει στο body padding:0px;margin:0px;

και αφου θελεις να το κανεις με javascript μπορεις να βαλεις στο head

>
document.write("<style>css κωδικας</style>");

Σύνδεση

Full height iframe με javascript;

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

SlackulatoR

Xenobius

SlackulatoR

Xenobius

SlackulatoR

dark_banishing

SlackulatoR

bikey77

SlackulatoR

bikey77

SlackulatoR

drumforhim

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

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

Σύνδεση

Σύνδεση