I want my facebook canvas app to be able to update the address bar URL when changing context. So, for example, if my app's home URL is https://apps.facebook.com/myapp/
, and the user clicks on some item on the home screen, I'd like the URL shown in the address bar to change to https://apps.facebook.com/myapp/1/
or https://apps.facebook.com/myapp/#1
.
Normally, my app could do that with HTML5's history.pushState()
. Problem is, the canvas app runs inside an iframe, and cannot access the parent window's pushState
(because the iframe is not the same domain as apps.facebook.com). Another technique should be changing just the hash part of the address, i.e. window.location.hash = "1"
, but that too is not possible from within the iframe, for the same reason.
It is possible to change the parent page URL with reloading the entire page, by using
window.parent.location = "https://apps.facebook.com/myapp/1/"
However, this would cause the parent page to reload, taking up a good number of seconds, and then reload the iframe - all in all, a very long and frustrating experience for the user.
Could there be a way of doing this I haven't thought of?
I'm almost certain there is no way to do this without special help from Facebook's end. For example Facebook could implement a script on the canvas page which utilizes postMessage
(https://developer.mozilla.org/en-US/docs/DOM/window.postMessage) to listen for cross-domain messages from your iframe.
But without cooperation from Facebook, I don't think any modern, standard browser will allow you to do this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With