iframe 内的锚链接什么都不做答案

【问题标题】：Anchor links inside iframe does nothingiframe 内的锚链接什么都不做
【发布时间】：2013-03-16 19:43:16
【问题描述】：

是否可以在滚动 div 内设置非滚动 iFrame，并且 iFrame 内的锚链接可以正常工作？ iFrame 内的锚链接应滚动到 iFrame 内的位置，我不需要/不希望它们指向父页面上的元素。

这是我的 jsFiddle 和一个简单的例子：

及其代码：

<div style="width: 100%; height: 300px; overflow: auto;">
<iframe style="width: 100%; height: 2000px;" src="http://www.hypergurl.com/anchors.html" scrolling="no"></iframe>
</div>

我与示例中使用的 hypergurl.com 链接没有关联，这只是我能找到的第一个示例，其中包含按 id/name 语法链接锚定的页面。

如果您加载 JSFiddle 并单击 iFrame 内的“跳转到底部”链接，它什么也不做（使用 FireFox 19.0.2 进行测试）。在使用各种页面进行测试时，它在 FireFox 中永远无法工作，在 Chrome 中，它有时会在第一次单击时工作，但如果您向上滚动并再次单击它就无法工作。在 IE8 中，它大部分时间都在工作（滚动）。

如果我让 iFrame 本身具有滚动条（删除滚动 =“no”），滚动始终正常工作。不过，这对我来说不是一个实用的解决方案，因为我在框架之外有想要滚动的内容。在我的真实代码中，我动态设置 iFrame 的高度以填充其内容，这样它看起来更像是我页面上的内容。

关于为什么我需要这样做的其他信息：

我正在创建一个基于 Web 的电子邮件客户端，到目前为止，如果我在 iframe 中显示电子邮件的 HTML 正文，而不是尝试在我的页面内的表格单元格或 div 中显示，那么问题似乎最少.我希望这些类型的链接能够正常工作。我确实对内容有一些控制权，它来自我的服务器，我可以对其进行一些修改（但不想过多地破解它）。例如，我已经修改了所有链接以在新窗口中打开（但不是以 # 开头的链接，所以这不是我的问题）。

我知道 GMail 不使用 iFrames，但我的 XFINITY（康卡斯特有线）基于 Web 的电子邮件客户端使用，并且他们设法让这些工作（但到目前为止还没有弄清楚他们在做什么） .

【问题讨论】：

bugzilla.mozilla.org/show_bug.cgi?id=638598 可能是相关的，但我在 web-kit 浏览器中也看到了这一点，而不仅仅是 Mozilla。此外，我还看到没有此问题的页面。那些工作确实从 JavaScript 加载 iFrame 内容，而不是通过 src 属性，所以也许只有当我将我的设计更改为那个时才有效（会做很多工作）？

标签： html iframe anchor

【解决方案1】：

查看这篇文章：Jump Link Inside an iFrame

如果您的 iframe 具有不同的域，那么您将无法使用 javascript 解决方案来解决此问题，但如果是，那么您可以将 target="_parent" 属性添加到 iframe 中的所有锚点。

var iframe = document.getElementById('iframeId');
var doc = (iframe.contentDocument)? iframe.contentDocument: iframe.contentWindow.document;

var anchors = doc.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++)
    anchors[i].target = '_parent';

【讨论】：

【解决方案2】：

我最近在这个库中添加了代码来解决 iFrame 中的锚链接的所有问题。

https://github.com/davidjbradshaw/iframe-resizer

它拦截页面导航的所有请求并将父页面滚动到正确的位置。如果在 iFrame 中找不到锚点，它会将其冒泡到父页面并在那里查找。

【讨论】：