title: Using postMessage() on iframe by passing relative path
body: <p>I have a folder with the following files:</p>
  
  <ul>
  <li>index.html</li>
  <li>screens.html</li>
  <li>code.js</li>
  <li>screens-code.js</li>
  <li>style.css</li>
  <li>screens-style.css</li>
  </ul>
  
  <p><strong>index.html</strong> is my main page containing my layout and it includes an <code>iframe</code> with <code>src="screens.html"</code>. It works, however when I want to do <code>postMessage()</code> from <strong>index.html</strong> (which has added <strong>code.js</strong> file) to <strong>screens.html</strong> (it has added <strong>screens-code.js</strong>) I cannot do that with a relative path. I am doing like this (in main page's code.js file):</p>
  
  <pre><code>var frame = document.getElementById('innerScreen').contentWindow; // #innerScreen is iframe's ID
  var hello = 'Message from screens.html file';
  frame.postMessage(hello, frame.url); // or instead of &lt;frame.url&gt; i tried using just &lt;screens.html&gt; as relative path to HTML file
  </code></pre>
  
  <p>I get the error:</p>
  
  <p><strong>Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.</strong></p>
  
  <p>What's going on? I have all files in same folder, I don't run it by server (kind of XAMPP). Doesn't it work without server?</p>
  
  <p>In <strong>screens-code.js</strong> I only have this:</p>
  
  <pre><code>window.addEventListener('message', function(event)
  {
     console.log('Success?');
  }
  </code></pre>
  
  <p>But nothing happens except above errors.</p>
  
  <p><strong>---------------------------------------------------------------------------</strong></p>
  
  <p><strong>DEMO</strong>
  <a href="http://plnkr.co/edit/q9Whqt0RfA90UwxQkFDv?p=preview" rel="nofollow">http://plnkr.co/edit/q9Whqt0RfA90UwxQkFDv?p=preview</a></p>
  
  <p>So there, in console is an error 
  <strong>Uncaught TypeError: Cannot read property 'contentWindow' of null</strong></p>
  
  <p><strong>[edit]</strong></p>
  
  <p>This works, so adding <code>EventListener</code> which will wait for iframe to load:</p>
  
  <pre><code>frame.addEventListener('load', function() 
  {
        iframe.postMessage('some testing message', '*');
  });
  </code></pre>