I'm attempting to dynamically resize an iframe's height based on its content height, using easyXDM. The code makes a call to check the iframe's body.scrollheight every 5 seconds, the theory being if the page height has changed, the iframe height will update with it every 5 seconds. It works on the initial call - the iframe even resizes properly. The problem is that the provider continues to return the content's original height even when the iframe content's height has changed.
The code:
consumer (page containing the iframe):
var socket = new easyXDM.Socket({
remote: "http://remoteDomain.ca/blahblah.html",
container: "embedded",
onMessage: function(message, origin){
alert(message); //continually alerts "542px" even when body.scrollheight
// has changed
document.getElementById('iframe').style.height = message + "px";
var t = setTimeout(function() {
socket.postMessage();
}, 5000);
},
onReady: function() {
socket.postMessage();
}
});
provider (iframe content):
var socket = new easyXDM.Socket({
onMessage: function(message, origin){
socket.postMessage(document.body.scrollHeight);
}
});
After try easyXDM, it finally worked by using another sample: http://stevesouders.com/misc/test-postmessage.php
In source page just:
In frame page:
Worked like a charm! My iframe height is refreshed every setInterval interation.