6

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

关于我为什么需要这样做的附加信息：

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

我知道 GMail 不使用 iFrame，但我的 XFINITY（由 Comcast 有线电视提供）基于 Web 的电子邮件客户端使用，并且他们设法让这些工作（但到目前为止还没有弄清楚他们在做什么）。

4

2 回答 2

6

查看这篇文章：在 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';
于 2013-10-11T19:15:39.630 回答
2

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

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

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

于 2015-01-19T14:24:54.140 回答