Φορτώνω μια ιστοσελίδα aspx σε ένα iframe. Το περιεχόμενο στο Iframe μπορεί να έχει μεγαλύτερο ύψος από το ύψος του iframe's. Το iframe δεν πρέπει να έχει μπάρες κύλισης.
Έχω μια ετικέτα περιτύλιξης div
μέσα στο iframe η οποία ουσιαστικά είναι όλο το περιεχόμενο. Έγραψα κάποια jQuery για να κάνω την αλλαγή μεγέθους να συμβεί :
$("#TB_window", window.parent.document).height($("body").height() + 50);
όπου
TB_window
είναι το div στο οποίο περιέχεται το Iframe
.
body
- η ετικέτα σώματος του aspx στο iframe.
Αυτό το σενάριο επισυνάπτεται στο περιεχόμενο του iframe. Παίρνω το στοιχείο TB_window
από τη σελίδα του γονέα. Ενώ αυτό λειτουργεί μια χαρά στο Chrome, αλλά το TB_window καταρρέει στο Firefox. Είμαι πραγματικά μπερδεμένος/χαμένος για το γιατί συμβαίνει αυτό.
Μπορείτε να ανακτήσετε το ύψος του περιεχομένου του IFRAME
's χρησιμοποιώντας:
contentWindow.document.body.scrollHeight
Αφού φορτωθεί το IFRAME
, μπορείτε στη συνέχεια να αλλάξετε το ύψος κάνοντας τα εξής:
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
Στη συνέχεια, στην ετικέτα IFRAME
, συνδέετε τον χειριστή ως εξής:
<iframe id="idIframe" onload="iframeLoaded()" ...
Είχα μια κατάσταση πριν από λίγο καιρό όπου χρειαζόταν επιπλέον να καλέσω το iframeLoaded
από το ίδιο το IFRAME
μετά από μια υποβολή φόρμας μέσα σε αυτό. Μπορείτε να το πετύχετε αυτό κάνοντας τα εξής μέσα στα σενάρια περιεχομένου του IFRAME
's:
parent.iframeLoaded();
Μια ελαφρώς βελτιωμένη απάντηση στον Αρίστο...
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
Στη συνέχεια, δηλώστε στο iframe σας ως εξής:
<iframe onload="resizeIframe(this)" ...
Υπάρχουν δύο μικρές βελτιώσεις:
iframe.height = ""
αν πρόκειται να το επαναπροσδιορίσετε στην αμέσως επόμενη εντολή. Κάτι τέτοιο στην πραγματικότητα συνεπάγεται μια επιβάρυνση, καθώς έχετε να κάνετε με ένα στοιχείο DOM.Επεξεργασία: Εάν το περιεχόμενο στο πλαίσιο αλλάζει πάντα, τότε καλέστε:
parent.resizeIframe(this.frameElement);
μέσα από το iframe μετά την ενημέρωση. Λειτουργεί για την ίδια προέλευση.
Ή για αυτόματη ανίχνευση:
// on resize
this.container = this.frameElement.contentWindow.document.body;
this.watch = () => {
cancelAnimationFrame(this.watcher);
if (this.lastScrollHeight !== container.scrollHeight) {
parent.resizeIframeToContentSize(this.frameElement);
}
this.lastScrollHeight = container.scrollHeight;
this.watcher = requestAnimationFrame(this.watch);
};
this.watcher = window.requestAnimationFrame(this.watch);
$(document).height() // - $('body').offset().top
και/ή
$(window).height()
Δείτε την ερώτηση του Stack Overflow https://stackoverflow.com/questions/806402.
Δοκιμάστε αυτό για να βρείτε το ύψος του σώματος στην jQuery:
if $("body").height()
Δεν έχει τιμή εάν Firebug. Ίσως αυτό να είναι το πρόβλημα.