Question

是否可以在滚动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中的“Jump to Bottom”链接，它什么都不做（使用FireFox 19.0.2进行测试）。在使用各种页面进行测试时，它永远无法在FireFox中运行，在Chrome中，它有时会在第一次单击时起作用，但如果向上滚动并再次单击它则不起作用。在IE8中，它大部分时间都可以工作（滚动）。

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

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

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

我知道GMail不使用iFrame，但是我的XFINITY（通过康卡斯特电缆）基于网络的电子邮件客户端确实如此，他们设法让这些工作（但到目前为止还没有弄明白他们在做什么）

Answer 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';

Answer 2

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

<强> https://github.com/davidjbradshaw/iframe-resizer

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

iframe内的锚点链接什么都不做

2 个答案: