<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="jquery@1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <h1><code>iframe</code> JavaScript context demostration</h1>
      <div class="row">
        <div class="col-sm-6">
          <p class="desc">Called by child for <span class="text-danger" id="called">0</span> times.</p>
          <p><button id="call-child" class="btn btn-primary">Call child</button></p>
          <iframe id="mine" src="mine.html" frameborder="0"></iframe>
        </div>
        <div class="col-sm-6">
          <p class="desc">Open DevTools console for accessed <code>window</code> result.</p>
          <p><button id="access-cross-domain" class="btn btn-danger">Access cross-domain iframe</button></p>
          <iframe id="html5rocks" src="http://www.html5rocks.com/" frameborder="0"></iframe>
        </div>
      </div>
    </div>
  </body>

</html>

// Code goes here

function callMe (from) {
  var $count = $('#called');
  $count.text(Number($count.text()) + 1);
}

$(function () {
  $(function () {
    $('#call-child').click(function () {
      $('#mine')[0].contentWindow.callMe();
    });
    
    $('#access-cross-domain').click(function () {
      console.log($('#html5rocks')[0].contentWindow);
    });
  });
});
/* Styles go here */

iframe {
  width: 100%;
  min-height: 200px;
  
  border: 1px solid gray;
}

#called {
  font-size: 24px;
}

.desc {
  line-height: 26px;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>facebook</title>
    <script data-require="jquery@1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <style>
    #called {
      font-size: 24px;
    }
    </style>
    <script>
    function callMe () {
      var $count = $('#called');
      
      $count.text(Number($count.text()) + 1);
    }
    
    $(function () {
      $('button').click(function () {
        window.parent.callMe();
      });
    });
    </script>
  </head>

  <body>
    <div class="container">
      <h2>This is an <code>iframe</code></h2>
      <p>Called by parent for <span class="text-danger" id="called">0</span> times.</p>
      <p>
        <button class="btn btn-success">Call parent</button>
      </p>
    </div>
  </body>

</html>