【问题标题】：Jump Link Inside an iFrameiFrame 内的跳转链接
【发布时间】：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 width="100%" height="2000" 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。

【问题讨论】：

同样的问题：stackoverflow.com/questions/9569309/…

标签： html firefox iframe hyperlink

【解决方案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 和不同的域。