title: Why do I get "permission denied" in Microsoft Edge when accessing parent iframe
body: <p>I have some problems calling a function of a specific iframe after reloading another iframe. It works on all major browser but behaves a little weird on Microsoft Edge. You will need the following constellation to get the error. All files are in the same directory on the same server. I haven't set any Content Security Policy. </p>
  
  <p>If you load the Frame1.html everything will be fine and you will get the "alert" message.</p>
  
  <p>But if you click the "Click me" a-tag on the frame4.html, the frame2.html will be reloaded and you will get the "permission denied" error because the parent object (<code>var tmpParent = parent;</code>) is not accessible. If you click the a-tag again it will work without any error.</p>
  
  <p>I think it is a Edge bug, because all other browser can handle it and it only occur on the first click.</p>
  
  <p>The error will also occur if you use top insted of parent.</p>
  
  <p>The code of topFrame.js is used to find the top-most Frame of my site.
  I cannot simply use top because it should be possible to embed my site.</p>
  
  <p>Does anybody have a clue?</p>
  
  <p>Thanks a lot!</p>
  
  <p><strong>Frame1.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Frame 1&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
      var topFrame = this;
  
      function myAlert() {
        alert('alert');
      }
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;iframe id="overallContentWrapper" name="mainFrame" src="frame2.html" frameborder="0"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Frame2.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Frame 2&lt;/title&gt;
    &lt;script src="topFrame.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      window.addEventListener("load", function load(event) {
        window.removeEventListener("load", load, false);
  
        try {
          topFrame.myAlert();
        } catch (e) {
          alert(e);
        }
      }, false);
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;iframe name="subFrame" src="frame3.html" frameborder="0"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Frame3.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Frame 3&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;iframe name="subsubFrame" src="frame4.html" frameborder="0"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Frame4.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Frame 4&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;a href="frame2.html" target="mainFrame"&gt;Click me&lt;/a&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>topFrame.js</strong></p>
  
  <pre><code>try {
    var tmpParent = parent;
    var topFrame = tmpParent.topFrame;
    while (topFrame === undefined) {
      tmpParent = tmpParent.parent;
      topFrame = tmpParent.topFrame;
    }
  } catch (e) {
    alert(e);
  }
  </code></pre>