iFrame 内的跳转链接
Posted
技术标签:
【中文标题】iFrame 内的跳转链接【英文标题】：Jump Link Inside an iFrame 【发布时间】：2012-03-30 00:49:01 【问题描述】：在 iframe 内（在 page-A 上），我有一个简单的页面 (page-B)，它有几个跳转链接（例如 <a href="#my-id">jump link</a>）到页面的不同部分（page-B）。 iframe 高度预设为长于 page-B 的高度；这是一个要求。
由于某些原因，跳转链接在 FF 上不起作用（我在 Mac/FF 10.0.2 上）；但是，它在 Safari 和 IE8 上运行良好。这是sample page。
页面代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jump Link Test on an iFrame</title>
</head>
<body>
<h1>Page that has an iFrame</h1>
<iframe src="./iframe.html" frameborder="0" scrolling="no">
</iframe>
</body>
</html>
iframe.html 的代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>iFrame Content</title>
<style type="text/css">
.box
margin: 0 0 5px;
width: 400px;
height: 400px;
#box1
background-color: #f00;
#box2
background-color: #f0f;
#box3
background-color: #00f;
</style>
</head>
<body>
<ul>
<li><a href="#box1">Box 1</a></li>
<li><a href="#box2">Box 2</a></li>
<li><a href="#box3">Box 3</a></li>
</ul>
<div>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
</div>
</body>
</html>
注意：如果我设置iframe高度page-B的高度，问题就解决了。但是，不幸的是，鉴于我的情况，这不是一个选项，因为我无法访问 page-A。
【问题讨论】：
同样的问题：***.com/questions/9569309/… 【参考方案1】：嗯，只是想一想，您是否为 iframe 重置了边距？当您没有明确指定边距属性时，FF 往往会做一些奇怪的事情。
【讨论】：
我认为这与页边距无关。【参考方案2】：仅 HTML 是不可能的。
正如您在 Firefox Bug Report Nr. 638598 上看到的那样，这是很久以前提到的！也有很多人不喜欢这种行为，但Jonas Sicking says in his comment 认为这永远不会改变。他认为这是 Firefox 防止这种潜在黑客攻击功能的一项功能。
如果您不认识他 read here that，他是 mozilla 的 web-api 项目的技术主管，以及 W3C 的 indexeddb 和 file-api 规范的编辑。
其他人试图找到像Matthew 这样的解决方案，但这个例子在我的简短测试用例中没有用你的 html 结构。 Some others say 它应该与 javascript 和 scrollTo() 函数一起使用。
很抱歉，这只是 FireFox 的一个限制，但希望您能够安全地了解该问题。
【讨论】：
这适用于最新的 FF 32.0.3。我现在没有发现任何问题。【参考方案3】：我已经遇到过这个问题。就我而言，我无法使用 javascript 解决方案，因为我的 iframe 位于不同的域中，并且我无权访问父页面。
但是有一个 HTML 解决方法。
从此更改您的链接：
<a href="#my-id">jump link</a>
到这里：
<a target="_parent" href="http://parenturl.com/#my-id">jump link</a>
并在您的父页面中创建一个不可见的<div id="my-id"></div> 并使用 CSS 定位它。
【讨论】：
除非我错过了你的意思，否则定位不可见的<div> 可能会有问题，因为父母事先并不知道。
这种技术只有在你知道你的 iframe 将被嵌入到哪里时才有效，我用它来将 iframe 添加到 YouTube 品牌频道。我知道 iframe 只会通过 YouTube 页面呈现，所以我使用 YouTube 页面中已经存在的 ID 之一作为锚链接
这听起来只适用于您对 iframe 内容非常了解的特殊情况。并不是他想要的。但在你的特殊情况下是个好主意；）
这对我不起作用。我正在为 iframe 父级使用 chrome 和不同的域。以上是关于iFrame 内的跳转链接的主要内容，如果未能解决你的问题，请参考以下文章
怎样使得页面的跳转一直在iframe里进行，不会跳出iframe
怎样使得页面的跳转一直在iframe里进行，不会跳出iframe