Για παράδειγμα:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
Θέλω να μπορεί να ρυθμίζει το ύψος του ανάλογα με το περιεχόμενο μέσα σε αυτό, χωρίς τη χρήση κύλισης.
Προσθέστε αυτό στην ενότητα <head>
:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
Και αλλάξτε το iframe σας σε αυτό:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Όπως βρέθηκε στο sitepoint discussion.
Η πρόταση του hjpotter92 δεν λειτουργεί στο safari! Έκανα μια μικρή προσαρμογή στο σενάριο ώστε να λειτουργεί τώρα και στο Safari.
Η μόνη αλλαγή που έγινε είναι η επαναφορά του ύψους στο 0 σε κάθε φόρτωση, προκειμένου να επιτραπεί σε ορισμένα προγράμματα περιήγησης να μειώνουν το ύψος.
Προσθέστε αυτό στην ετικέτα <head>
:
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
Και προσθέστε την ακόλουθη ιδιότητα onload
στο iframe σας, όπως παρακάτω
<iframe onload='resizeIframe(this)'></iframe>
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
}
document.getElementById(id).height=(newheight) + "px";
document.getElementById(id).width=(newwidth) + "px";
}
προσθέστε αυτό στο iframe σας: "autoResize('youriframeid')",