Iframe Redimensionable con pagina en otro dominio

Siroman · #1 (**permalink**) 22/05/2012, 08:07

Hola a todos, mi problema es que necesito redimensionar un iframe segun la altura de la pagina que contiene(Ej: height Iframe:200px, height Pagina de dentro 1000px;), he encontrado varios codigos pero solo funcionan si ambas paginas estan en el mismo dominio, cosa que no me sirve ya que lo necesito para que sean de dominios distintos.ç
Si alguien ha tenido el mismo problema o sabe como solucionarlo le agradeceria que me ayudase.
Gracias de antemano

Panino5001 · #2 (**permalink**) 22/05/2012, 14:02

Alguna de estas técnicas podría ayudarte con la ejecución de una función en otro dominio, aunque tenés que tener control de ambos dominios para poder usarlas:
Para navegadores con soporte html5:
https://developer.mozilla.org/en/DOM/window.postMessage
Para navegadores antiguos:
http://lab.pipwerks.com/javascript/c...mes/index.html

Siroman · #3 (**permalink**) 24/05/2012, 04:21

gracias por tu solucion pero no me sirve hehehe, porque al estar en otro dominio la pagina me deniega el permiso para accecer a "document" y no lo redimensiona

Panino5001 · #4 (**permalink**) 24/05/2012, 12:58

Uf, Siroman, me parece que no entendiste nada.

Siroman · #5 (**permalink**) 28/05/2012, 08:43

encontre solucion para que me redimensione a la altura pero me surgio otro...., si le doy a alguna pestaña o enlace interno, me redirecciona a la pagina del principio(la que pongo en el src del iframe)
os pongo aqui el codigo a ver si alguien me puede hechar una mano con este problema >.<
html1:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>IFrame Resize Sample</title>
<script type="text/javascript" src="FrameManager.js"></script>
</head>
<body>
<div>The Following is an iframe:</div>
<iframe id="ifrSample1" scrolling="no" frameborder="0" src="www.paginaExterna.com" style="margin:0px;width:100%;height:100px" onload="FrameManager.registerFrame(this)">

</iframe>
</body>
</html>

js de este html:

// FrameManager.js -- Must be added in Hosting window
var FrameManager =
{
currentFrameId : '',
currentFrameHeight : 0,
lastFrameId : '',
lastFrameHeight : 0,
resizeTimerId : null,

init : function()
{
if (FrameManager.resizeTimerId == null)
{
FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 500);
resizeTimerId = null;
}
},

resizeFrames : function()
{
FrameManager.retrieveFrameIdAndHeight();

if ((FrameManager.currentFrameId != FrameManager.lastFrameId) ||
(FrameManager.currentFrameHeight != FrameManager.lastFrameHeight))
{
var iframe = document.getElementById(FrameManager.currentFrameI d.toString());

if (iframe == null) return;

iframe.style.height = FrameManager.currentFrameHeight.toString() + "px";

FrameManager.lastFrameId = FrameManager.currentFrameId;
FrameManager.lastFrameHeight = FrameManager.currentFrameHeight;
window.location.hash = '';
}
},

retrieveFrameIdAndHeight : function()
{
if (window.location.hash.length == 0) return;

var hashValue = window.location.hash.substring(1);
if ((hashValue == null) || (hashValue.length == 0)) return;

var pairs = hashValue.split('&');

if ((pairs != null) && (pairs.length > 0))
{
for(var i = 0; i < pairs.length; i++)
{
var pair = pairs[i].split('=');

if ((pair != null) && (pair.length > 0))
{
if (pair[0] == 'frameId')
{
if ((pair[1] != null) && (pair[1].length > 0))
{
FrameManager.currentFrameId = pair[1];
}
}
else if (pair[0] == 'height')
{
var height = parseInt(pair[1]);

if (!isNaN(height))
{
FrameManager.currentFrameHeight = height;
FrameManager.currentFrameHeight += 15;
}
}
}
}
}
},

registerFrame : function(frame)
{
var currentLocation = location.href;
var hashIndex = currentLocation.indexOf('#');
if (hashIndex > -1)
{
currentLocation = currentLocation.substring(0, hashIndex);
}
frame.contentWindow.location = frame.src + '?frameId=' + frame.id + '#' + currentLocation;
}
};

window.setTimeout(FrameManager.init, 300);

Siroman · #6 (**permalink**) 28/05/2012, 10:55

HTML2(el de dentro del iframe):

<!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>
<title>##title##</title>

<script type="text/javascript" src="Frame.js"></script>
</head>

<body onload="publishHeight();">
<div class="page">

</div>

</body>
</html>

js de este html:

// Frame.js -- Must be added in iframe window
function publishHeight()
{
// if (window.location.hash.length == 0) return;

var frameId = getFrameId();
if (frameId == '') return;

var actualHeight = getBodyHeight();
var currentHeight = getViewPortHeight();

if (Math.abs(actualHeight - currentHeight) > 15)
{
var hostUrl = window.location.hash.substring(1);

hostUrl += "#";
hostUrl += 'frameId=' + frameId;
hostUrl += '&';
hostUrl += 'height=' + actualHeight.toString();
alert(hostUrl);
window.top.location = hostUrl;
}
}

function getFrameId()
{
var qs = parseQueryString(window.location.href);

var frameId = qs["frameId"];

var hashIndex = frameId.indexOf('#');

if (hashIndex > -1)
{
frameId = frameId.substring(0, hashIndex);
}
return frameId;
}

function getBodyHeight()
{
var height;
var scrollHeight;
var offsetHeight;

if (document.height)
{
height = document.height;
}
else if (document.body)
{
if (document.body.scrollHeight)
{
height = scrollHeight = document.body.scrollHeight;
}
if (document.body.offsetHeight)
{
height = offsetHeight = document.body.offsetHeight;
}

if (scrollHeight && offsetHeight)
{
height = Math.max(scrollHeight, offsetHeight);
}
}

return height;
}

function getViewPortHeight()
{
var height = 0;
if (window.innerHeight)
{
height = window.innerHeight - 18;
}
else if ((document.documentElement) && (document.documentElement.clientHeight))
{
height = document.documentElement.clientHeight;
}
else if ((document.body) && (document.body.clientHeight))
{
height = document.body.clientHeight;
}

return height;
}

function parseQueryString(url)
{
url = new String(url);
var queryStringValues = new Object();
var querystring = url.substring((url.indexOf('?') + 1), url.length);
var querystringSplit = querystring.split('&');

for (i = 0; i < querystringSplit.length; i++)
{
var pair = querystringSplit[i].split('=');
var name = pair[0];
var value = pair[1];

queryStringValues[name] = value;
}

return queryStringValues;
}