Faire iframe régler automatiquement la hauteur selon le contenu sans utiliser scrollbar? [dupliquer]
cette question a déjà une réponse ici:
- ajuster la largeur et la hauteur de l'iframe en fonction de son contenu 27 Réponses
par exemple:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
je veux qu'il puisse ajuster sa hauteur en fonction du contenu à l'intérieur, sans utiliser défiler.
17 réponses
ajoutez ceci à votre <head> section:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
et changez votre iframe pour ceci:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Que l'on trouve sur sitepoint discussion .
vous pouvez utiliser cette bibliothèque, qui au départ taille votre iframe correctement et le maintient également à la bonne taille en détectant chaque fois que la taille du contenu de l'iframe change (soit via la vérification régulière dans un setInterval ou via MutationObserver ) et de le redimensionner.
https://github.com/davidjbradshaw/iframe-resizer
cela fonctionne à la fois avec les iframes croisées et les Iframes du même domaine.
la suggestion de hjpotter92 ne fonctionne pas en safari! J'ai fait un petit ajustement au script pour qu'il fonctionne maintenant aussi en Safari.
seul le changement fait est de remettre la hauteur à 0 sur chaque charge afin de permettre à certains navigateurs de diminuer la hauteur.
ajouter à <head> tag:
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
et ajouter l'attribut onload suivant à votre iframe, comme
<iframe onload='resizeIframe(this)'></iframe>
Voici une version compacte:
<iframe src="hello.html"
onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
</iframe>
la réponse hjpotter92 fonctionne assez bien dans certains cas, mais j'ai trouvé le contenu iframe souvent obtenu bas-clipped dans Firefox & IE, tandis que fine dans le Chrome.
fonctionne bien pour moi et résout le problème de clipping. Le code a été trouvé à http://www.dyn-web.com/tutorials/iframes/height / . J'ai fait une légère modification pour enlever l'attribut onload du HTML. Placer le code suivant après le <iframe> HTML et avant la fermeture </body> tag:
<script type="text/javascript">
function getDocHeight(doc) {
doc = doc || document;
// /q/how-to-get-height-of-entire-document-with-javascript-63613/"10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
ifrm.style.height = getDocHeight( doc ) + 4 + "px";
ifrm.style.visibility = 'visible';
}
document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
setIframeHeight(this.id);
}
</script>
votre iframe HTML:
<iframe id="ifrm" src="some-iframe-content.html"></iframe>
Note Si vous préférez inclure le Javascript dans le <head> du document, vous pouvez revenir à l'utilisation d'un attribut inline onload dans le iframe HTML, comme dans la dyn-web page web.
éviter JavaScript en ligne; vous pouvez utiliser une classe:
<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>
et référence avec jQuery:
$('.iframe-full-height').on('load', function(){
this.style.height=this.contentDocument.body.scrollHeight +'px';
});
jQuery .la méthode nous permet de rechercher les enfants immédiats de l'élément dans le DOM tree.
jQuery:
$('iframe').height( $('iframe').contents().outerHeight() );
Rappelez-vous que le corps de la page intérieure de l'iframe doit avoir sa hauteur
CSS:
body {
height: auto;
overflow: auto
}
cela fonctionne pour moi (aussi avec plusieurs iframes sur une seule page):
$('iframe').load(function(){$(this).height($(this).contents().outerHeight());});
cela fonctionne pour moi (la plupart du temps).
mettez ça au bas de votre page.
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="application/javascript" src="/script/jquery.browser.js">
</script>
<script type="application/javascript" src="/script/jquery-iframe-auto-height.js">
</script>
<script type="application/javascript">
jQuery('iframe').iframeAutoHeight();
$(window).load(
function() {
jQuery('iframe').iframeAutoHeight();
}
);
// for when content is not html e.g. a PDF
function setIframeHeight() {
$('.iframe_fullHeight').each(
function (i, item) {
item.height = $(document).height();
}
);
};
$(document).ready( function () {
setIframeHeight();
});
$(window).resize( function () {
setIframeHeight();
});
</script>
la première moitié est de ??? et fonctionne quand il y a du html dans l'iframe.
La seconde moitié définit iframe en hauteur de page (et non content height), quand iframes class est iframe_fullHeight . Vous pouvez l'utiliser si le contenu est un PDF ou autre, mais vous devez définir la classe. Peut également être utilisé uniquement lorsque toute la hauteur appropriée.
Note: pour une raison quelconque, quand il recalcule après redimensionnement de fenêtre, il obtient la mauvaise hauteur.
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";
}
ajoutez ceci à votre iframe: onload= " autoResize ('youriframeid') "
jq2('#stocks_iframe').load(function(){
var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ;
jq2('#stocks_iframe').css('height',iframe_width); });
<iframe id='stocks_iframe' style='width:100%;height:0px;' frameborder='0'>
Essayez ceci pour IE11
<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>
j'ai eu des problèmes dans le passé en appelant iframe.onload pour créer dynamiquement des iframes, je suis donc allé avec cette approche pour le réglage de la taille de l'iframe:
vue iFrame
var height = $("body").outerHeight();
parent.SetIFrameHeight(height);
Affichage Principal
SetIFrameHeight = function(height) {
$("#iFrameWrapper").height(height);
}
(cela ne fonctionnera que si les deux vues sont dans le même domaine)
Je l'ai fait avec AngularJS. Angular n'a pas de charge ng, mais un module tiers a été fait; installez avec bower ci-dessous, ou trouvez-le ici: https://github.com/andrefarzat/ng-load
Obtenir le ngLoad directive: bower install ng-load --save
configurer votre iframe:
<iframe id="CreditReportFrame" src="about:blank" frameborder="0" scrolling="no" ng-load="resizeIframe($event)" seamless></iframe>
Contrôleur de resizeIframe de la fonction:
$scope.resizeIframe = function (event) {
console.log("iframe loaded!");
var iframe = event.target;
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};
<script type="text/javascript">
function resizeIframe(obj) {
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
cela ne fonctionne pas pour le chrome. Mais travailler pour firefox.
je voulais faire un iframe se comporter comme une page normale (j'avais besoin de faire une bannière plein écran à l'intérieur d'un élément iframe ), donc voici mon script:
(function (window, undefined) {
var frame,
lastKnownFrameHeight = 0,
maxFrameLoadedTries = 5,
maxResizeCheckTries = 20;
//Resize iframe on window resize
addEvent(window, 'resize', resizeFrame);
var iframeCheckInterval = window.setInterval(function () {
maxFrameLoadedTries--;
var frames = document.getElementsByTagName('iframe');
if (maxFrameLoadedTries == 0 || frames.length) {
clearInterval(iframeCheckInterval);
frame = frames[0];
addEvent(frame, 'load', resizeFrame);
var resizeCheckInterval = setInterval(function () {
resizeFrame();
maxResizeCheckTries--;
if (maxResizeCheckTries == 0) {
clearInterval(resizeCheckInterval);
}
}, 1000);
resizeFrame();
}
}, 500);
function resizeFrame() {
if (frame) {
var frameHeight = frame.contentWindow.document.body.scrollHeight;
if (frameHeight !== lastKnownFrameHeight) {
lastKnownFrameHeight = frameHeight;
var viewportWidth = document.documentElement.clientWidth;
if (document.compatMode && document.compatMode === 'BackCompat') {
viewportWidth = document.body.clientWidth;
}
frame.setAttribute('width', viewportWidth);
frame.setAttribute('height', lastKnownFrameHeight);
frame.style.width = viewportWidth + 'px';
frame.style.height = frameHeight + 'px';
}
}
}
//--------------------------------------------------------------
// Cross-browser helpers
//--------------------------------------------------------------
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn, false);
} else {
elem.attachEvent("on" + event, function () {
return (fn.call(elem, window.event));
});
}
}
})(window);
les fonctions s'expliquent d'elles-mêmes et donnent lieu à des commentaires qui expliquent plus en détail leur objet.
cette option fonctionnera à 100%
<iframe id='iframe2' src="url.com" frameborder="0" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe>