Maison >interface Web >js tutoriel >code js pour la hauteur adaptative Iframe et la surveillance en temps réel des changements de hauteur

code js pour la hauteur adaptative Iframe et la surveillance en temps réel des changements de hauteur

高洛峰
高洛峰original
2017-01-09 09:23:161678parcourir

Google N fois et Baidu M fois Après avoir testé 1605 fois (j'ai entendu dire que le Pesticide 1605 était sorti après tant d'expériences), les résultats suivants ont été obtenus dans IE7 et Firefox3 et cela fonctionne toujours !
1. Donnez d’abord une Iframe.

<iframe id="ifrm" 
marginheight="0" 
marginwidth="0" 
height="100" 
width="1000" 
frameborder="0" 
scrolling="no" 
src="xxxxx.html"> 
</iframe>

2. Voyez ensuite comment obtenir la hauteur de la page dans l'Iframe.
En fait, le plus gênant est de savoir comment rendre l'acquisition très précise. Les valeurs obtenues dans différentes méthodes et différents navigateurs seront différentes ! Étourdi ~~. Après avoir consulté de nombreux avis, nous avons abouti à la fonction javascript suivante (le paramètre doc est l'objet window.document) :

function getDocHeight(doc) 
{ 
//在IE中doc.body.scrollHeight的可信度最高 
//在Firefox中,doc.height就可以了 
var docHei = 0; 
var scrollHei;//scrollHeight 
var offsetHei;//offsetHeight,包含了边框的高度 
if (doc.height) 
{ 
//Firefox支持此属性,IE不支持 
docHei = doc.height; 
} 
else if (doc.body) 
{ 
//在IE中,只有body.scrollHeight是与当前页面的高度一致的, 
//其他的跳转几次后就会变的混乱,不知道是依照什么取的值! 
//似乎跟包含它的窗口的大小变化有关 
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight; 
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight; 
} 
else if(doc.documentElement) 
{ 
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight; 
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight; 
} 
/* 
docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符! 
*/ 
return docHei; 
}

3 Enfin, modifiez la hauteur de l'Iframe et utilisez un timer pour. vérifier en permanence la hauteur des pages qu'il contient change.

function doReSize() 
{ 
var iframeWin = window.frames[&#39;ifrm&#39;]; 
var iframeEl = window.document.getElementById? window.document.getElementById(&#39;ifrm&#39;): document.all? document.all[&#39;ifrm&#39;]: null; 
if ( iframeEl && iframeWin ) 
{ 
var docHei = getDocHeight(iframeWin.document); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + &#39;px&#39;; 
} 
else if(iframeEl) 
{ 
var docHei = getDocHeight(iframeEl.contentDocument); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + &#39;px&#39;; 
} 
} 
function runResizeTask() 
{ 
doReSize(); 
setTimeout("runResizeTask()",500);//每隔半秒执行一次 
} 
runResizeTask();

Il n'est pas nécessaire de se demander si les pages incluses sont pliées, cachées/affichées !
Code js complet

<script language="javascript" type="text/javascript"> 
function getDocHeight(doc){ 
//在IE中doc.body.scrollHeight的可信度最高 
//在Firefox中,doc.height就可以了 
var docHei = 0; 
var scrollHei;//scrollHeight 
var offsetHei;//offsetHeight,包含了边框的高度 

if (doc.height){ 
//Firefox支持此属性,IE不支持 
docHei = doc.height; 
} 
else if (doc.body){ 
//在IE中,只有body.scrollHeight是与当前页面的高度一致的, 
//其他的跳转几次后就会变的混乱,不知道是依照什么取的值! 
//似乎跟包含它的窗口的大小变化有关 
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight; 
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight; 
} 
else if(doc.documentElement){ 
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight; 
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight; 
} 
/* 
docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符! 
*/ 
return docHei; 
} 
function doReSize(){ 
var iframeWin = window.frames[&#39;Main&#39;]; 
var iframeEl = window.document.getElementById? window.document.getElementById(&#39;Main&#39;): document.all? document.all[&#39;Main&#39;]: null; 
if ( iframeEl && iframeWin ){ 
var docHei = getDocHeight(iframeWin.document); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + &#39;px&#39;; 
} 
else if(iframeEl){ 
var docHei = getDocHeight(iframeEl.contentDocument); 
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + &#39;px&#39;; 
} 
} 

function runResizeTask(){ 
doReSize(); 
setTimeout("runResizeTask()",1000);//每隔1秒执行一次 
} 
runResizeTask(); 
</script>


Pour plus d'articles sur le code js sur la hauteur adaptative Iframe et la surveillance en temps réel des changements de hauteur, veuillez faire attention au PHP chinois site web!


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn