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

2023年6月25日 147次阅读

我已经设置了以下链接(在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

请帮忙.

谢谢

梅伊

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

你的代码可以像here一样独立工作

通过设置属性但没有设置允许顶部导航,除了新窗口/选项卡外,不允许突破框架

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.
点赞