Another SPWTF moment!
I have a SharePoint App that shows a list of orders that were placed for my eCommerce Site. But I want to share a link to this App with someone showing them details of one particular order without them having to first go to the list of orders and click on a particular order...

So I should be able to pass the parameters as query string for the SP Page and access within the App right?
No you can not do that because the SP app runs within an iframe within the SharePoint page and is served from a different domain. We all know that a page running in an iframe where the parent is on a different domain is a violation of cross origin policy. So...You won’t be able to read the query string.

SPWTF, So what can I do?
Well! use postMessage (html5) ...this is supported in all major browsers ..even IE8 (wow!!)

How do I do that?
Like this...

1. Call the SharePoint url as

http://mysp.com/page.aspx?param1=10&app=myapp&page=details

2.
Add a Script editor on the page that hosts the app part

<script type="text/javascript">
function GoToSpecificPage() {
var qs = document.location.search.substr(1);
var myframe = document.getElementsByTagName("iframe")[0]; // maybe a better way to get this 

var myfrmCW=myframe.contentWindow;
myfrmCW.postMessage(qs,"*");

}
_spBodyOnLoadFunctionNames.push("GoToSpecificPage");
</script>



3. In the Start page of the app add the code below to register listener and handle a message from parent

    <script>
        function listener(event) {
           //check the origin property to maintain security
            var hosturl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
            var data = event.data;
            var qs = "";
            if (data != null && data != "") {
                var r = {};
                var p = data.split(/\&/), l = p.length, kv;
                if (l === 0) { return false; }
                while (l--) {
                    kv = p[l].split(/\=/);
                    r[kv[0]] = decodeURIComponent(kv[1] || '') || true;

                }
                if (r["app"] == "myapp") {

                    if (r["page"] == "details" && r["param1"]) window.location = 'ShowDetails.aspx?param=' + r["param1"] + "&" + location.search.substr(1);
                   if (r["page"] == "edit" && r["param1"]) window.location = 'EditDetails.aspx?param=' + r["param1"] + "&" + location.search.substr(1);

                }
            }
        }

            if (window.addEventListener) {
                addEventListener("message", listener, false)
            } else {
                attachEvent("onmessage", listener)
            }
    </script>

 


Last edited Jun 24, 2013 at 8:21 PM by pushpabrol, version 3

Comments

jeskirkup Nov 20, 2013 at 2:39 PM 
Thanks for the useful information. Would I be correct that this approach could also be used to change the parent window URL from the child window in a provider hosted app? That is, I could use this technique to navigate the user to a different parent web page (in the same site collection) to another page based upon navigation links rendered in my remote web?