Question

I insert the following iframe in Blogger:

<iframe id="myId" src="http:www.example.com" width="100%" onload="var iframe = document.getElementById('myId');iframe.style.height = iframe.scrollHeight.toString() + 'px';"></iframe>

It should auto-adjust its height according to its contents.

I have tested it in an HTML page I have created and it works there.

But in Blogger it doesn't work. It inserts the iframe, but its height is not adjusted to its contents.

Why is this not working? Is it a Blogger policy or something like this?

Is there another way to auto adjust my iframe height programmatically?

Thanks!

Was it helpful?

Solution

This is not possible due to the Same Origin Policy.

Being able to measure the height of a page from a different site would effectively be a leak of information from that site. For example imagine framing an online banking transaction list page; by reading its height, you could determine whether the user was currently logged in to their online banking, and if so potentially how many transactions had been made recently.

There is a proposal to allow framed sites to opt in to being included in a document in a height-sensitive fashion using HTML5 seamless iframes. However we are currently a long, long way from that being something you can rely on in browsers.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top