1

There's a plethora of articles and questions on how to resize iFrames to fit the inner content for URL's that aren't cross-domain, or that are cross-domain but that are under the developers control.

But I cannot find how to resize an iFrame for which I have zero control over, and thus can't postMessage back to the parent.

Is this possible?

i.e. Imagine my site mysite.com is trying to iFrame CNN.com. How could I resize the CNN iFrame so that the entire contents of the iFrame displays, without needing to scroll through the CNN iFrame.

Edit

Since the iFrame is cross-domain, the simple solution of reading the content of the iFrame and re-sizing it based on the content height cannot work, due to security restrictions. For example, Chrome gives me this exception when trying to read the content of an iFrame on a different domain:

Uncaught SecurityError: Failed to read the 'contentDocument' property from > 'HTMLIFrameElement': Blocked a frame with origin "http://dev" from accessing a frame with origin "http://cnn.com". Protocols, domains, and ports must match.

Due to this, a common solution is to make the iFramed content communicate with the hosting page, as seen here. However, since the URL in my case, CNN.com, is completely 3rd party and out of my control, I cannot follow the cross-domain workaround.

Community
  • 1
  • 1
contactmatt
  • 16,706
  • 35
  • 116
  • 175
  • 1
    Is that possible? if So I am commenting here to see the update or answer. – Adam Buchanan Smith Jun 15 '15 at 23:54
  • 1
    If you are creating the iFrame with cnn.com as the source, you have complete control over it. What am I missing in your question? – Lance Jun 15 '15 at 23:55
  • 1
    If the iframe is on your site "mysite.com", then you can size the iframe however you want. You just can't touch control how the content of the iframe is rendered. I don't really understand where the problem is. – Norman Breau Jun 15 '15 at 23:57
  • @Lance for iFrame resizing, a lot of solutions require custom code in the host-page (i.e. mysite.com) _and_ the iFrame'd source (i.e. CNN.com) to make re-sizing happen. However, obviously I don't have any control over CNN.com and can't put custom code in CNN's website to make it communicate with the host-page (mysite.com). – contactmatt Jun 15 '15 at 23:59
  • So you want to get the height of the CNN's site and then change your iframe to have that exact same height (so no scrollbars are displayed I'm guessing)? – Alvaro Montoro Jun 16 '15 at 00:14
  • http://stackoverflow.com/questions/5908676/yet-another-cross-domain-iframe-resize-qa This answer may prove useful... They've jumped through a lot of hoops, but it looks like they found a way with this easyXDM library. – Norman Breau Jun 16 '15 at 00:19
  • I looked into easyXDM... and I don't think it will work in your case. It looks like it requires you to have code on both ends unfortunately. I don't believe it is possible to do this at a browser. I've seen some crazy solutions where people used a web scrapper and web renderer to render out the page, so that they could find whatever information they need and return it. (Server side coding on your own server). – Norman Breau Jun 16 '15 at 00:35

1 Answers1

1

Based on the comments I received, it seems safe to say that it is impossible to re-size a cross-domain iFrame from the client/browser side.

Perhaps some complex server-side algorithm could request the page and attempt to give hints about the size, but nothing can be done on the client-side.

contactmatt
  • 16,706
  • 35
  • 116
  • 175