set fancybox height with jquery

问题

I want to show a fancybox on my page displaying an iframe with a source of another domain that has dynamic height (since within the iframe I'll go to different pages or might have some dynamic content). I have access to the other domain's code as well. So I can use postMessage to send the iframe's source's height to my page. But I can't seem to figure how to change the fancybox's height through code.

I tried setting the height of all the divs that contain the iframe, including the iframe itself:

document.getElementById('fancybox-frame').height = parseInt(height);
document.getElementById('fancybox-content').height = parseInt(height);
document.getElementById('fancybox-outer').height = parseInt(height);
document.getElementById('fancybox-wrap').height = parseInt(height);

and I know that I'm getting the height through all right since it works perfectly on a directly integrated iframe.

Anyone got any ideas?

Thanks

Edit: I also tried $.fancybox.update() but I'm not really sure on how to implement that:

$.fancybox({
'height': height
});
$.fancybox.update();

回答1:

Have you tried the built in $.fancybox.update() method? The the documentation suggests (under API Methods) that this method should provide the functionality you're looking for.

回答2:

Found it, you have to change following attributes

document.getElementById('fancybox-content').style.height = parseInt(height) + 'px';
document.getElementById('fancybox-frame').height = parseInt(height);

来源：https://stackoverflow.com/questions/19876787/set-fancybox-height-with-jquery

标签

javascript

jquery

iframe

fancybox

postmessage