为什么设置为“_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 上存在沙盒属性。

你的代码在像here这样独立时可以工作

通过设置属性但NOT设置了allow-top-navigation，除了进入新窗口/选项卡外，不允许跳出框架

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

仅限 HTML5 沙盒

如果指定为空字符串，则此属性会对可出现在内嵌框架中的内容启用额外限制。该属性的值可以是空字符串（应用所有限制），也可以是解除特定限制的以空格分隔的标记列表。有效的令牌是：

• allow-forms：允许嵌入式浏览上下文提交表单。如果不使用该关键字，则不允许该操作。
• allow-modals：允许嵌入式浏览上下文打开模态窗口。
• allow-orientation-lock：允许嵌入式浏览上下文禁用锁定屏幕方向的功能。
• allow-pointer-lock：允许嵌入式浏览上下文使用 Pointer Lock API。
• allow-popups：允许弹出窗口（如来自 window.open、target="_blank"、showModalDialog）。如果不使用此关键字，该功能将静默失败。
• allow-popups-to-escape-sandbox：允许沙盒文档打开新窗口，而无需在其上强制使用沙盒标志。例如，这将允许第三方广告被安全地沙盒化，而不会对着陆页施加相同的限制。
• allow-presentation：允许嵌入者控制 iframe 是否可以启动演示会话。
• allow-same-origin：允许将内容视为来自其正常来源。如果未使用此关键字，则嵌入的内容将被视为来自唯一来源。
• allow-scripts：允许嵌入式浏览上下文运行脚本（但不创建弹出窗口）。如果不使用该关键字，则不允许该操作。
• allow-top-navigation：允许嵌入的浏览上下文导航（加载）内容到顶级浏览上下文。如果不使用该关键字，则不允许该操作。

Answer 2

我们将目标_top 用于iframe，如果您使用iframe 并希望在父选项卡中单击全部打开，那么您可以使用_top，否则无需使用它

Answer 3

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