title: Adding a variable to iframe's global scope
body: <p>My index html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;index&lt;/title&gt;
      &lt;script src="jquery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Index&lt;/h1&gt;
      &lt;hr/&gt;
      &lt;iframe id="frame"&gt;&lt;/iframe&gt;
      &lt;hr/&gt;
      &lt;button id="btn"&gt;Click&lt;/button&gt;
  
      &lt;script&gt;
      $(function(){
  
          window.api = {
              fun: function(){alert('index api')}
          };
  
          var frame = document.getElementById('frame');
          frame.src = 'frame.html';           
      });
  
  
      $('#btn').click(function(){
          $('#frame').contents().find('body').css('backgroundColor', 'red');
          $('#frame').contents().find('#btn').text('lol');
      });
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In the loaded <code>frame.html</code> the javascript can acces the <code>api</code> object via <code>parent.api</code>.</p>
  
  <p>Is it possible to add an api object to frame.html window, so it is accessible via <code>window.api</code> there? (and not <code>parent.api</code>) (consider same origin and differnet origins)?</p>
  
  <p>The above code does work (e.g. the <code>#button</code> changing the background and label), but I assume it's because all those documents are on my pc (same origin). Am I right?</p>