title: Allowing two sites to communicate to know the current URL of an iframe
body: <p>I'm trying to figure out a solution to allow an website to know what URL the user is on through an iframe.</p>
  
  <p><strong>Website 1:</strong> <code>http://website.website.com</code> (Remote Website, can only add javascript &amp; html to the webpage)</p>
  
  <p><strong>Website 2:</strong> <code>https://example.com</code> (Fully Editable, php, html, js.. etc)</p>
  
  <p><strong>Current Code:</strong> (Of Website 2 (Example.com)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
      &lt;title&gt;Website.com&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;
      &lt;script src="https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="body_blank"&gt;
      &lt;script type="text/javascript"&gt;
  
          jq = jQuery.noConflict();
  
          jq(document).ready(function() {
  
              var currentFramePath = '';
              var iframe = '&lt;iframe src="{src}" id="#iFrameContainer" style="position:fixed; top:0px; bottom:0px; right:0px; width: 100%; border: none; margin:0; padding:0; overflow: hidden; z-index:999999; height: 100%;"&gt;';
  
              var urlFrame = getUrlParameter('currentFrame');
  
              if(urlFrame != null &amp;&amp; urlFrame != ''){
                  console.log("Frame not found");
                  jq('#iFrameContainer').html(iframe.replace('{src}', urlFrame));
                  currentFramePath = urlFrame;
              }
  
              jq('#iFrameContainer').click(function(){
                  console.log("Clicked in frame");
                  currentFramePath = jq(this).attr('href');
                  console.log(currentFramePath);
              });
  
              setInterval(function(){
                  window.location = window.location.href.split('?')[0] + '?currentFrame=' + currentFramePath;
                  console.log("Update Query");
              }, 5000);
  
          });
  
          function getUrlParameter(sParam) {
              var sPageURL = decodeURIComponent(window.location.search.substring(1)),
                  sURLVariables = sPageURL.split('&amp;'),
                  sParameterName,
                  i;
              console.log("Get Query");   
              for (i = 0; i &lt; sURLVariables.length; i++) {
                  sParameterName = sURLVariables[i].split('=');
  
                  if (sParameterName[0] === sParam) {
                      return sParameterName[1] === undefined ? true : sParameterName[1];
                  }
              }
          };
      &lt;/script&gt;
      &lt;div id="wrapper" class="wrapper_blank"&gt;
          &lt;iframe src="http://website.website.com" id="#iFrameContainer" style="position:fixed; top:0px; bottom:0px; right:0px; width: 100%; border: none; margin:0; padding:0; overflow: hidden; z-index:999999; height: 100%;"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>Problem</h1>
  
  <p>If I refresh the page (iframe) on <code>example.com</code> it refreshes and forgets the page that the user is/was on...</p>
  
  <p>As you can see I have attempted to get it working by detecting their page through an iFrame however this is impossible due to it being on a different domain.</p>
  
  <h1>Solution?</h1>
  
  <p>I'm looking for some sort of solution to do something like described below, bare in mind there could be a better solution.</p>
  
  <p>I want the website <code>website.website.com</code> to get the current path / url of the page the user is on (which is being viewed through an iframe) and for it to send this path/url through to <code>example.com</code> then example.com would update the session / temporary cookie / temporary local storage / variable... etc which would then mean it would adjust the query string to point itself to the correct URL for when the user refreshes their page resulting in the refresh correctly remembering the page they were on.</p>
  
  <h1>Attempt</h1>
  
  <p>I tried to use the <code>postMessage</code> function by putting the follow code on their respective sites:</p>
  
  <p><strong>Website 1 Extra Code</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      setInterval(function() {
          parent.postMessage(window.location.pathname, "https://website.com");
      },1000);
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Website 2 Extra Code:</strong></p>
  
  <pre><code>var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
  
  eventer(messageEvent, function(e) {
      console.log('Parent Message: ', e.data);
  }, false);
  </code></pre>
  
  <p>However nothing happens, no console messages or errors... just nothing.</p>
  
  <p>I've even tried copying the likes of <a href="https://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage" rel="noreferrer">https://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage</a> but nothing in that helped :(</p>
  
  <p>Any ideas what I am doing wrong and a way to resolve it to achieve this?</p>
  
  <p>Thanks</p>
  
  <h1>Edits</h1>
  
  <p>I've tried the following js inside <a href="http://website.website.com" rel="noreferrer">http://website.website.com</a> but it didn't work:</p>
  
  <pre><code>localStorage.setItem('CurrentURLChecker', window.location.href)
  
  if (localStorage.getItem('CurrentURLChecker')) {
      if (window.parent.location.href == "https://website.com/" ) {
          console.log("URL FOUND");
      }
  }
  </code></pre>
  
  <blockquote>
    <p>Uncaught DOMException: Blocked a frame with origin "<a href="http://website.website.com" rel="noreferrer">http://website.website.com</a>" from accessing a cross-origin frame at <a href="http://website.website.com/:251:44" rel="noreferrer">http://website.website.com/:251:44</a></p>
  </blockquote>
  
  <h1>EDIT - An example</h1>
  
  <p>Website 1 = "<a href="http://stackoverflow.serviceprovider.com" rel="noreferrer">http://stackoverflow.serviceprovider.com</a>"</p>
  
  <p>Website 2 = "<a href="https://stackoverflow.com">https://stackoverflow.com</a>"</p>
  
  <p>Website 2 contains an iframe which shows the exactly what Website 1 shows.</p>
  
  <p><strong>I am never going to visit Website 1, all clicks are done on Website 2</strong></p>
  
  <p>If I was to click on a link inside the iframe and it was to navigate to: <a href="http://stackoverflow.serviceprovider.com/this-new-page/" rel="noreferrer">http://stackoverflow.serviceprovider.com/this-new-page/</a> then Website 1 should be able to detect this and store the iframes location and remember it.</p>
  
  <p>Now if I refresh my browser instead of the iframe loading <a href="http://stackoverflow.serviceprovider.com" rel="noreferrer">http://stackoverflow.serviceprovider.com</a> it would instead load the page they actually refreshed which is <a href="http://stackoverflow.serviceprovider.com/this-new-page/" rel="noreferrer">http://stackoverflow.serviceprovider.com/this-new-page/</a></p>
  
  <p>The tab/window URL will always stay on <a href="https://stackoverflow.com/">https://stackoverflow.com/</a> but it would be a necessity to append a query string so the links can be made sharable.</p>
  
  <p>It's that simple.</p>