title: window.frameElement is undefined in Google Chrome when local, works when online
body: <p>I have a requirement to develop a web app that is to be accessed locally and offline. As part of the design an <strong>iframe</strong> is used to swap out content as and when needed. The trouble is that when accessed locally the script works in FF 32 and IE 11 but not in Chrome 38. All running on Windows 7 SP1 64-bit.</p>
  
  <p>Further, when accessed from a server, the same script works in Chrome, FF and IE. I have a hunch that it could be caused by a bug in Chrome. Nevertheless, I would like to know if there is anything wrong with my script. I have provided them here :</p>
  
  <blockquote>
    <p>index.html</p>
  </blockquote>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;body&gt;
  
  &lt;p&gt;This example demonstrates how to assign an "onload" event to an iframe element.&lt;/p&gt;
  
  &lt;iframe id="iFrame" name="iFrame" height="500px" width="500px" src="about:blank"&gt;&lt;/iframe&gt;
  
  &lt;p id="demo"&gt;&lt;/p&gt;
  
  &lt;button id="swap" onclick="swap()"&gt;SWAP&lt;/button&gt;
  
  &lt;script&gt;
  
      function swap() {
  
      document.getElementById("iFrame").src = "child.html";
      }
  
      function myFunction() {
          document.getElementById("demo").innerHTML = "Iframe is loaded.";
      }
  
      window.onload = myFunction();
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <blockquote>
    <p>child.html</p>
  </blockquote>
  
  <pre><code>&lt;body&gt;
  
  &lt;h1&gt;This is an extra page...&lt;/h1&gt;
  
  &lt;button onclick="next()"&gt;NEXT&lt;/button&gt;      
  
  &lt;script src="worker.js" type="text/javascript"&gt;&lt;/script&gt;        
  
  &lt;/body&gt;  
  </code></pre>
  
  <p></p>
  
  <blockquote>
    <p>grandchild.html</p>
  </blockquote>
  
  <pre><code>&lt;body&gt;
  
  &lt;h1 id="header"&gt;&lt;/h1&gt;
  
  &lt;button onclick="prev()"&gt;PREV&lt;/button&gt;      
  
  &lt;script&gt;        
      window.onload = function () {
  
          init();
      };      
  
  &lt;/script&gt;
  
  &lt;script src="worker.js"&gt;&lt;/script&gt;      
  &lt;/body&gt;
  </code></pre>
  
  <blockquote>
    <p>worker.js</p>
  </blockquote>
  
  <pre><code>function next() {
  
  window.frameElement.src = "grandchild.html";    
  }
  
  function prev() {
  
  window.frameElement.src = "child.html";
  
  }
  
  function init() {
  
  var iFrame = window.frameElement;
  
  var frameDocument = (iFrame.contentWindow || iFrame.contentDocument);
  
  if (frameDocument.document)frameDocument = frameDocument.document;
  
  frameDocument.getElementById("header").innerHTML = "This is from the script!!";
  
  }
  </code></pre>
  
  <p>It is obvious that <strong>window.frameElement</strong> is undefined. I'm a newbie to web development. Any help will have my gratitude.</p>