Iframe内的锚链接没有反应

Question

在滚动的div中嵌入不滚动的iFrame，iFrame内的锚点链接能够正常工作吗？ iFrame内的锚点链接应该滚动到iFrame内的位置，我不需要/也不希望它们指向父页面上的元素。

这是我用jsFiddle提供的一个简单示例：

http://jsfiddle.net/shopguy/WjmHG/

并且它的代码为：

<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本身拥有滚动条（删除scrolling =“no”），则滚动始终正常工作。但对我来说，这不是一个实际的解决方案，因为我希望框架外的内容也随着它滚动。在我的真实代码中，我动态设置iFrame的高度以填充其内容，这样它看起来更像是我的页面上的内容。

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

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

我知道GMail不使用iFrames，但我的XFINITY（由Comcast电缆提供）基于Web的电子邮件客户端使用，他们设法使这些链接起作用（但迄今为止还没有弄清楚他们都做了什么）。

- eselk

---

https://bugzilla.mozilla.org/show_bug.cgi?id=638598 可能有关，但我在WebKit浏览器中也看到了这个问题，而不仅仅是Mozilla。此外，我已经看到没有这个问题的页面。那些有效的页面确实从JavaScript加载iFrame内容，而不是通过src属性，因此可能只有在我更改设计为这样时才有效（这将是很多工作）？ - eselk

Answer 1

请查看此篇文章：在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';

- Sam

Answer 2

我最近在这个库中添加了代码，以解决iFrame内的锚点链接问题。

它拦截所有页面导航请求，并将父页面滚动到正确的位置。如果在iFrame中找不到锚点，它会将其传递到父页面并在那里查找。 https://github.com/davidjbradshaw/iframe-resizer

- David Bradshaw