November 6th, 2013, 11:04 PM
Detecting IFrame URL change w/ History.pushState
So, combining things that work well enough alone, they don't seem to work well together.
A site under my control is due to be within an iframe of another company. We're trying to size the iframe to the height of the content within. Common problem. A bigger problem because the height of the interior page may change as they navigate.
Normal page changes trigger this event fine and dandy.
The challenge is that the bulk of our page is AJAX driven and uses History.pushState() to dynamically update the page's URL. This does NOT trigger the event. And it doesn't seem to update the iframe's src, anyway.
Any tricks? Any mechanics I'm missing that could help solve this?
November 16th, 2013, 06:54 PM
If you are going with sending the scrollHeight of your iframe's page, in a query string; I think your going to probably have to use a proxy on the other website and have it get the content of your page (in PHP..., you could use file_get_contents() or CURL); then add the proxy's url to the iframe's SRC. That should allow for cross domain communication, without the security errors. From there, you could use something like this:
Alternatively..., another newer option, would be to use the HTML5 window.postMessage API; to communicate between the iframe and the parent document. You should be able to find some examples of this, by searching these key terms: "HTML5 postMessage iframe communication".
November 19th, 2013, 03:16 PM
The purpose of this was to put the document height up there as the page resizes, so the parent page could watch for a URL change, pull that parameter, and change the iframe height to match.
We just ended up going the HTML5's postmessage method. Was just hoping to avoid going that route if at all possible, but I guess support for it is pretty good now.