I am trying to use method readyCallback()
in iFrameResizer, but it does not seem to work. When I add the callback to parent iframe
object, it is never called:
iFrameResize({
log : true,
checkOrigin: false,
minHeight : 800,
maxHeight : 4000,
readyCallback: function(){
// (!) never called
console.log('ready parent callback .. ');
},
messageCallback: function(data){
// works OK
console.log('message callback .. ');
console.log(data);
},
initCallback: function(){
// works OK
window.scrollTo(0,0);
alert("OK initiated");
},
resizedCallback : function(info){
// works OK
console.log(info);
scrollTo(0, info.iframe.offsetTop);
},
heightCalculationMethod : 'taggedElement'
}, '#iframe123');
The iframeResizer.contentWindow.js
inside iframe element loads and works OK.
Am I missing something? Thank you.
Turns out that method readyCallback
was in wrong place. Here is working setup:
Parent page with iframe element:
iFrameResize({
log : true,
checkOrigin: false,
minHeight : 800,
maxHeight : 4000,
messageCallback: function(data){
console.log('message callback .. ');
console.log(data);
// scroll to top edge of iframe element
scrollTo(0, data.iframe.offsetTop);
},
initCallback: function(){
console.log("OK initiated");
window.scrollTo(0,0);
},
resizedCallback : function(info){
console.log(info);
scrollTo(0, info.iframe.offsetTop);
},
heightCalculationMethod : 'taggedElement'
}, '#iframe123');
Inside iframe element with loaded iframeResizer.contentWindow.js
:
// solution 1:
window.iFrameResizer = {
readyCallback: function(){
// scroll parent to top edge of iframe element
window.parentIFrame.scrollToOffset(0,0);
}
}
// solution 2:
window.iFrameResizer = {
readyCallback: function(){
if('parentIFrame' in window){
parentIFrame.sendMessage('Loaded iframe ['+window.parentIFrame.getId()+'].');
}
}
}
// load content window at the end
<script src="/js/iframeResizer.contentWindow.js"></script>