为什么设置为“_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

我们为 iframe 使用目标 _top，如果您使用 iframe 并希望所有点击都在父选项卡中打开，那么您可以使用 _top 否则不需要使用它

Answer 2

如果你想在同一个标签打开链接，那么不需要添加任何目标.....它会自动在同一个标签打开链接（默认目标值为“_self”）

Answer 3

您的问题源于 JSFiddle 和其他此类网站（包括 Whosebug 的 StackSnippets）使用的 iFrame 上存在沙盒属性。

您的代码像 here

一样独立运行

通过设置属性但 NOT 设置 allow-top-navigation，不允许跳出新框架除外 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.

为什么设置为“_top”或“_parent”的目标属性会在新选项卡中打开

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

html

css

jquery

tabs

target