Why does a target attribute set to "_top" or "_parent" opens up in a new tab

Question

I've set the following links (found on DEMO) to open in the same tab by using the "_top" target (tried "_parent" as well, but for some reason they keep opening in a new tab. I've tried different browsers, and different devices but it still happens.

$(document).ready(function() {
  // for slide-out menu
  $('.js-nav').click(function() {
    $(this).parent().find('.menu').toggleClass('active');
    if ($(this).find('i.fa').hasClass('fa-bars')) {
      $(this).find('i.fa').removeClass('fa-bars').addClass('fa-times');
    } else if ($(this).find('i.fa').hasClass('fa-times')) {
      $(this).find('i.fa').removeClass('fa-times').addClass('fa-bars');
    }
  });
});

html,
body {
  width: 600px;
  height: 50px;
}
.toggle-nav {
  margin: auto 0 auto 0;
  float: left;
  color: #423c4c;
}
.toggle-nav:hover {
  color: #423c4c;
}
.nav-wrap {
  overflow: hidden;
}
.menu {
  float: left;
  visibility: hidden;
  position: relative;
  right: 100%;
  transition-duration: 5s;
  -webkit-transition-duration: 5s;
}
.menu.active {
  visibility: visible;
  right: 0px;
  transition-duration: 1s;
  -webkit-transition-duration: 1s;
}
.menu ul {
  text-align: justify;
  min-width: 400px;
  margin: 0 auto;
  padding-right: 20px;
}
.menu ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}
.menu ul li {
  margin-top: 2%;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Alef', sans-serif;
  font-size: 13px;
  color: #423c4c;
}
.menu ul li a:link {
  color: #423c4c;
  text-decoration: none;
}
.menu ul li a:visited {
  color: #423c4c;
  text-decoration: none;
}
.menu ul li a:hover {
  <!-- border-bottom: 1px solid #423c4c;
  -->text-decoration: none;
  background-color: #fce2e2;
  ;
  color: red;
}
.menu ul li a:active {
  color: #423c4c;
}
.menu ul li ul {
  display: inline-block;
  position: absolute;
  right: 272px;
  top: 25px;
}
.menu ul li ul li {
  display: table;
  font-size: 13px;
  right: 0px;
  text-align: right;
  background-color: #fce2e2;
  padding: 5px;
  margin-top: 0px;
  word-spacing: 1px;
  min-width: 130px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="toggle-nav js-nav" href="#/"><i class="fa fa-bars fa-2x"></i></a>
<div class="nav-wrap">
  <nav class="menu">
    <ul>
      <li>
        <a href="http://google.com" target="_top">link1</a>
      </li>
      <li>
        <a href="http://pinterest.com" target="_top">link2</a>
      </li>
      <li>
        <a href="http://www.awwwards.com" target="_top">link3</a>
      </li>
      <li>
        <a href="http://dribbble.com" target="_top">link4</a>
      </li>
    </ul>
  </nav>
</div>

JSfiddle demo

Please help.

Thanks

Mey

Answer 1

Your problem stems from the presence of the sandbox attribute on the iFrame used by JSFiddle and other such sites including StackOverflow's StackSnippets.

Your code works when stand alone like here

By having the attribute set but NOT having the allow-top-navigation set, it is not allowed to break out of the frame except to a new window/tab

https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe

sandbox HTML5 only

If specified as an empty string, this attribute enables extra restrictions on the content that can appear in the inline frame. The value of the attribute can either be an empty string (all the restrictions are applied), or a space-separated list of tokens that lift particular restrictions. Valid tokens are:

• allow-forms: Allows the embedded browsing context to submit forms. If this keyword is not used, this operation is not allowed.
• allow-modals: Allows the embedded browsing context to open modal windows.
• allow-orientation-lock: Allows the embedded browsing context to disable the ability to lock the screen orientation.
• allow-pointer-lock: Allows the embedded browsing context to use the Pointer Lock API.
• allow-popups: Allows popups (like from window.open, target="_blank", showModalDialog). If this keyword is not used, that functionality will silently fail.
• allow-popups-to-escape-sandbox: Allows a sandboxed document to open new windows without forcing the sandboxing flags upon them. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon a landing page.
• allow-presentation: Allows embedders to have control over whether an iframe can start a presentation session.
• allow-same-origin: Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.
• allow-scripts: Allows the embedded browsing context to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.
• allow-top-navigation: Allows the embedded browsing context to navigate (load) content to the top-level browsing context. If this keyword is not used, this operation is not allowed.

Answer 2

We use target _top for iframe, If you are using iframe and want all click open in parent tab then you can use _top otherwise no need to use it

Answer 3

If you want to open the links on the same tab then no need to add any target.....It will automatically open the links on the same tab (the default target value is "_self")