jquery - 为什么目标属性设置为 "_top"或 "_parent"在新选项卡中打开

Question

我已将以下链接(在 DEMO 上找到)设置为使用“_top”目标在同一个选项卡中打开(也尝试过“_parent”，但由于某种原因它们一直在新选项卡中打开。我'我尝试了不同的浏览器和不同的设备，但它仍然会发生。

$(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

请帮忙。

谢谢

我是

Answer 1

您的问题源于 JSFiddle 和其他此类网站(包括 StackOverflow 的 StackSnippets)使用的 iFrame 上存在 sandbox 属性。

你的代码像here一样独立运行。

通过设置属性但不设置allow-top-navigation，不允许跳出框架，除了新窗口/标签

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.