 |
Andrés Fernández |
 |
3/8/2008 |
 |
438 |
 |
0 |
 |
|
 |
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
Una de las preguntas más frecuentes en algunos foros en los que participo es cómo adaptar las medidas de un iframe a las de la páginas que éste contiene, para evitar la aparición o el uso de las barras de scroll.
Bueno, he aquí un script probado en Ópera, Explorer, Safari y Firefox, que hace precisamente ese trabajo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script>
function getWindowData(n,i){
var ifr=document.getElementById(i).contentWindow.document || document.getElementById(i).contentDocument;
var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
if (typeof window.frames[n].innerWidth != 'undefined'){
widthViewport= window.frames[n].innerWidth;
heightViewport= window.frames[n].innerHeight;
}else if(typeof ifr.documentElement != 'undefined' && typeof ifr.documentElement.clientWidth !='undefined' && ifr.documentElement.clientWidth != 0){
widthViewport=ifr.documentElement.clientWidth;
heightViewport=ifr.documentElement.clientHeight;
}else{
widthViewport= ifr.getElementsByTagName('body')[0].clientWidth;
heightViewport=ifr.getElementsByTagName('body')[0].clientHeight;
}
xScroll=window.frames[n].pageXOffset || (ifr.documentElement.scrollLeft+ifr.body.scrollLeft);
yScroll=window.frames[n].pageYOffset || (ifr.documentElement.scrollTop+ifr.body.scrollTop);
widthTotal=Math.max(ifr.documentElement.scrollWidth,ifr.body.scrollWidth,widthViewport);
heightTotal=Math.max(ifr.documentElement.scrollHeight,ifr.body.scrollHeight,heightViewport);
return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
}
function resizeIframe(ID,NOMBRE){
document.getElementById(ID).height=null;
document.getElementById(ID).width=null;
window.location='#';//necesario para safari
var m=getWindowData(NOMBRE,ID);
document.getElementById(ID).height=m[5];
document.getElementById(ID).width=m[4]+22;
}
function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
} else if (obj.attachEvent){
obj.attachEvent("on"+evType, fn);
} else {
obj['on'+evType]=fn;
}
}
window.onload=function(){
resizeIframe('pp','pp');
addEvent(document.getElementById('pp'), 'load', function(){resizeIframe('pp','pp');}, false);
}
</script>
</head>
<body>
<iframe name="pp" id="pp" src="test2.php" frameborder="1" scrolling="no"></iframe></body>
</html>
|
|
|
volver |
|
|
|
|
