我与我的示例中使用的hypergurl.com链接没有关联,这只是我能找到的第一个带有id / name语法链接的页面的例子.
如果您加载JSFiddle并单击iFrame中的“Jump to Bottom”链接,它什么都不做(使用FireFox 19.0.2进行测试).在使用各种页面进行测试时,它永远无法在FireFox中运行,在Chrome中,它有时会在第一次单击时起作用,但如果向上滚动并再次单击它则不起作用.在IE8中,它大部分时间都可以工作(滚动).
如果我让iFrame本身有滚动条,则滚动可以正常工作(删除scrolling =“no”).这对我来说不是一个实用的解决方案,因为我有框架之外的内容,我想用它滚动.在我的真实代码中,我动态设置iFrame的高度以填充其内容,这样看起来更像是我页面上的内容.
有关我为什么需要这样做的其他信息：
我正在创建一个基于Web的电子邮件客户端,到目前为止,如果我在iframe中显示电子邮件的HTML正文,而不是尝试在我的页面内的表格单元格或div中显示,那么问题似乎最少.我想要这些类型的链接工作.我确实对内容有一些控制权,它来自我的服务器,我可以修改一些(但不想破解它太多).例如,我已经修改了所有要在新窗口中打开的链接(但不是以#开头的链接,因此这不是我的问题).
我知道GMail不使用iFrame,但是我的XFINITY(通过Comcast有线电视)基于网络的电子邮件客户端确实如此,他们设法让这些工作(但到目前为止还没有弄明白他们在做什么).
看看这篇文章：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';
