问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

锚标签目标属性中\_self、\_top、\_parent的区别

社区维基
1
新手上路，请多包涵

我知道 _blank 在与锚标记一起使用时会打开一个新选项卡，而且，在使用框架集时我会使用自定义目标，但我想知道 _parent 之间的区别， _self 和 _top 。

原文由 Joseph Rex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlhyperlinkanchor
阅读 537
2 个回答
得票最新
社区维基
1
✓ 已被采纳

虽然这些答案很好，但恕我直言，我认为它们并没有完全解决这个问题。

锚标记中的 target 属性告诉浏览器锚的目的地的目标。它们最初是为了操纵锚点并将其定向到文档框架系统而创建的。这是在 CSS 帮助 HTML 开发人员之前很久。

而 target="_self" 是浏览器的默认值，最常见的目标是 target="_blank" 它在新窗口中打开锚点（通常已通过浏览器设置重定向到选项卡）。 "_parent" ， "_top" 和 framename 标签对于那些不熟悉网站构建的人来说是一个谜，因为 iframe 的时代趋势。

target="_self" 这将在同一帧中打开一个锚点。令人困惑的是，因为我们通常不再在框架中编写（而且 frame 和 frameset 标签在 HTML5 中已过时）人们假设这是一个相同的窗口函数。相反，如果此锚点嵌套在框架中，它将以某种沙盒模式打开，这意味着仅在该框架中。

target="_parent" 如果它们相互嵌套，将在框架的下一层打开

target="_top" 这打破了它嵌套的所有框架之外，并在浏览器窗口中打开链接作为顶级文档。

target="framename 这最初被弃用但在 HTML5 中恢复。这将针对有问题的确切框架。虽然 name 是正确的方法，但该方法已被替换为使用 id 标识标签。

 <!--Example:-->

<html>
<head>
</head>
<body>
<iframe src="url1" name="A"><p> This my first iframe</p></iframe>
<iframe src="url2" name="B"><p> This my second iframe</p></iframe>
<iframe src="url3" name="C"><p> This my third iframe</p></iframe>

<a href="url4" target="B"></a>
</body>
</html>

原文由 Brian Ellis 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

下面是一张显示嵌套帧和不同目标值的效果的图像，后面是对图像的解释。

不同的目标值。 1

想象一个网页包含 3 个嵌套的 <iframe> 又名“框架”/“框架集”。所以：

  • 最外面的网页/浏览器是起始上下文
  • 最外面的网页是框架 3 的父级
  • 框架 3 是框架 2 的父级
  • 框架 2 是框架 1 的父级
  • 框架 1 是最里面的框架

然后目标属性有这些效果：

  • 如果第 1 帧具有 与 target="_self" 的链接，则链接以第 1 帧为目标（即链接 以包含链接的帧为 目标（即以自身为目标））
  • 如果框架 1 与 target="_parent" 有链接，则链接指向框架 2（即链接指向 _父框架_）
  • 如果框架 1 有一个链接 target="_top" ，链接指向初始网页（即链接指向 _最顶层/最外层框架_；（在这种情况下；链接跳过祖父框架 3））
    • 如果框架 2 有一个链接 target="_top" ，该链接 也 指向初始网页（即，链接再次指向 _最顶层/最外层框架_）
  • 如果 这些框架中的任何 一个 具有 target="_blank" 的链接，该链接的目标是 _辅助浏览上下文_，也就是 “新窗口”/“新标签”
    • 这适用于框架 3、框架 2、框架 1 和最外层的网页。在 target="_blank" 的情况下小心“tabnabbing”； 使用 rel="noopener" 属性

原文由 bin 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题