title: Pass Function from Another Window Pure JavaScript
body: <p>I am requiring some JavaScript functions to be sent back to the parent window and having difficulty.  I have created a sample to iterate what I am attempting to do.  But basically I need to show and hide a DIV on the parent window by executing a function from the separate window.  </p>
  
  <p>The first Snippet is Page1.html,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function newWin() {
    window.open("page2.html", "New_Win");
  }
  
  function toggle_vis(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block')
      e.style.display = 'none';
    else
      e.style.display = 'block';
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    background-color: red;
    margin: auto;
    display: block;
    position: absolute;
    width: 800px;
    height: 600px;
    padding: 10px;
    z-index: 1;
  }
  
  #frame {
    background-color: black;
    display: block;
    position: absolute;
    width: 400px;
    height: 300px;
    padding: 0px;
    z-index: 2;
  }
  
  #inner {
    background-color: green;
    display: none;
    position: absolute;
    width: 200px;
    height: 150px;
    z-index: 3;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="frame"&gt;&lt;button onclick="newWin()"&gt;Open New Window&lt;/button&gt;
      &lt;div id="inner"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the code from Page2.html.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function test(){
     parent.document.innerHTML.toggle_vis('inner');
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
      background-color: blue;
      margin: auto;
      display: block;
      position: absolute;
      width: 400px;
      height: 200px;
      padding: 10px;
      z-index: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;button onclick="test()"&gt;Show/Hide Parent Div&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>