0

I am allowing a part of my site to be shown in another site (different domain).

My concern is to set the height of iframe to the height of its content. I could use this solution, but my case is cross browser case, so this doesnot work.

I tried to get the height of iframe by: 

window.parent.document.getElementById('id_iframe').contentDocument.body.scrollHeight;

but this is giving only the visible height.

What am I missing?

Community
  • 1
  • 1
doniyor
  • 36,596
  • 57
  • 175
  • 260

1 Answers1

1

You can't use JavaScript to access content the user has loaded from another domain. It would be a security risk.

With the cooperation of the other site, you can receive a message (via postMessage) sent by the other site when its load event fires that tells you its height (and then you can resize in response to that).

It could also sent new heights when resize events fire in it.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • ah ok. I am writing js widget, how is the approach for this? – doniyor Feb 17 '15 at 09:34
  • When the `load` event fires, you read the height of the document, then `postMessage` it to the parent frame which will have an event listener waiting for the it. – Quentin Feb 17 '15 at 09:35
  • so I need to work with the owner of other site, right? – doniyor Feb 17 '15 at 09:37
  • Yes, hence "With the cooperation of the other site". – Quentin Feb 17 '15 at 09:42
  • but one more thing. user is pasting a js snippet from my page which builds up the iframe in users page. I can send messages from that js of mine right? – doniyor Feb 17 '15 at 09:45
  • 1
    If your code is running on a page, then that page can `postMessage` to any frames it is in or that are in it. – Quentin Feb 17 '15 at 09:49