JavaScript how to prevent navigation to another page?

Question:

I understand the inter-window events. I chose topface as an example, I want to write an interwindow click or something like that.

How do I prevent a frame from navigating to the page that loads it? And how in general can topface interact and "understand" that it is in a frame? And why doesn't the transition occur in the editor on this site (stackoverflow)?

  var iframe = document.getElementsByTagName('iframe')[0];

  var iframeDoc = iframe.contentWindow.document;

  if (iframeDoc.readyState == 'complete') {
    iframeDoc.body.style.backgroundColor = 'green';
  }
  iframe.onload = function() {
    var iframeDoc2 = iframe.contentWindow.document;
    iframeDoc2.body.style.backgroundColor = 'orange';
    // iframeDoc2.body.getElementById('id').innerHTML = 'Новый BODY!';

    var iBody = iframeDoc2.body;
      // iBody.innerHTML = 'Новый BODY!';

    var iId = iframeDoc2.getElementById('id');
      // iId.innerHTML = 'Новый ID!';

    var iBu = iframeDoc2.getElementById('button');
      // $( iBu ).trigger('click');
      while (true) {
        console.log("1");
      }
  }
  *{
    padding: 0px;
    margin: 0px;
    border: 0px;
  }
  iframe{
    width:100%;
    height:100vh;
  }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  </head>
  <body>
<iframe src="http://topface.com/"></iframe>

  </body>
</html>

Answer:

  var iframe = document.getElementsByTagName('iframe')[0];

  var iframeDoc = iframe.contentWindow.document;

  if (iframeDoc.readyState == 'complete') {
    iframeDoc.body.style.backgroundColor = 'green';
  }
  iframe.onload = function() {
    var iframeDoc2 = iframe.contentWindow.document;
    iframeDoc2.body.style.backgroundColor = 'orange';
    // iframeDoc2.body.getElementById('id').innerHTML = 'Новый BODY!';

    var iBody = iframeDoc2.body;
      // iBody.innerHTML = 'Новый BODY!';

    var iId = iframeDoc2.getElementById('id');
      // iId.innerHTML = 'Новый ID!';

    var iBu = iframeDoc2.getElementById('button');
      // $( iBu ).trigger('click');
      while (true) {
        console.log("1");
      }
  }
  *{
    padding: 0px;
    margin: 0px;
    border: 0px;
  }
  iframe{
    width:100%;
    height:100vh;
  }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  </head>
  <body>
<iframe src="http://zulubet.com/"></iframe>

  </body>
</html>
Scroll to Top