#1
  1. No Profile Picture
    Dazed&Confused
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2002
    Location
    Tempe, AZ
    Posts
    501
    Rep Power
    127

    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.

    The solution we are exploring is including the height in the internal URL which can be read by the exterior page's Javascript ala:

    Code:
                $(document).ready(function(){
                    $("#iframeId").on('load',function(e){
                        console.log(e);
                    });
                });
    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?

    Thanks
    LinkedIn: Dave Mittner
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    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:
    Code:
    document.getElementById("your_iframe_id_here").contentWindow.location.href.split("?your_resize_query_string_parameter_here=")[1]
    and... that should get the height of your iframe's body and then..., just set the iframe's height (in the other website's main page) with CSSOM / with CSS through JavaScript.

    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".
  4. #3
  5. No Profile Picture
    Dazed&Confused
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2002
    Location
    Tempe, AZ
    Posts
    501
    Rep Power
    127
    Thanks.

    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.
    LinkedIn: Dave Mittner

IMN logo majestic logo threadwatch logo seochat tools logo