handle url through iframe

Question

I have a facebook application written in angularjs, it all works like a charm except for the fact that as I go trough the various links of the application such as http://[baseurl]/#/item/25 this does not reflect the url shown in the navigation bar that still remains http://apps.facebook.com/MyTestApp/

So the thing that I'd need here, would be the ability to reflect the angularjs routing outside the iframe that contains my app.

Facebook apps reside inside the iframe. I'm not sure how did you imagine you could "synchronize" your iframe document url with the url of parent page, that is facebook?? — Stewie, Mar 14 '13 at 16:22
I think you would have to handle it manually by managing the hashbang path on the browser address bar. This is the first StackOverflow question I found that addresses how to do this, basically *i think* you would transfer the hash portion of the URL from angular's `$location` service to the javascript `location` object, and then cancel the browser's navigation. The example in the question uses jquery http://stackoverflow.com/questions/2366481/attaching-hashtag-to-url-with-javascript Here is the location documentation on angular http://docs.angularjs.org/guide/dev_guide.services.$location — Jason, Mar 14 '13 at 17:11

holographix · Accepted Answer · 2013-03-15T15:12:56.703

In the end I've managed the situation by parsing a parameter in the url something like

http://apps.facebook.com/MyTestApp/index.php?p=goto#item/48

so, by one hand, as soon as I land on the index.php, via php I check for the $_GET['vairable'] and use that as a trigger to get the hash string to feed a javascript variable that is directly executed, before the angluar is included. So as soon as the mainController (the angular controller associated with the index) is executed the variable with the path is already instantiated. At this point angular detects that there is a variable that forces the path to go somewhere and it will get the routing there.

here's some code

the index.php in the tag, right after the jquery lib inclusion and right before the angular includes

<script language="javascript" type="text/javascript">
    var redirect_to = null;

    $(function() {
        <?php
                // redirecting rulez
            if(isset($_GET['p'])) {
                ?>
                    redirect_to = window.parent.location.hash.substring(1);
                <?php
            }
        ?>

    });
</script>

the mainControl.js that is the one that get hit al the times that you load the index.php

if(redirect_to != null)
    $location.path(redirect_to);

in the other controllers

if(redirect_to != null) 
    window.parent.location.hash = "#" + $location.path();

repeat for all the other controllers. enjoy

handle url through iframe

1 Answers1