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

请帮忙。

由于

Mey的

Answer 1

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

您的代码可以像here

一样独立运行

通过设置属性但不设置了 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：允许嵌入式浏览上下文运行脚本（但不能创建弹出窗口）。如果未使用此关键字，则不允许此操作。

允许顶部导航：允许嵌入式浏览上下文将内容导航（加载）到顶级浏览上下文。如果未使用此关键字，则不允许此操作。

Answer 2

我们对_top使用目标iframe，如果您使用iframe并希望所有点击都在父标签中打开，那么您可以使用_top，否则无需使用它

Answer 3

如果你想在同一个标签上打开链接，则不需要添加任何目标.....它会自动打开同一个标签上的链接（默认目标值为＆＃34; _self＆＃34; ）

为什么设置为“_top”或“_parent”的目标属性会在新标签

3 个答案: