Html iframe 内的锚链接什么也不做
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15646782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Anchor links inside iframe does nothing
提问by eselk
Is it possible to have a non-scrolling iFrame inside a scrolling div, and have anchor links inside the iFrame work correctly?The anchor links inside the iFrame should scroll to the spot inside the iFrame, I don't need/want them to point to elements on the parent page.
是否有可能在滚动 div 内有一个非滚动 iFrame，并且 iFrame 内的锚链接可以正常工作？iFrame 内的锚链接应该滚动到 iFrame 内的位置，我不需要/希望它们指向父页面上的元素。
Here is my jsFiddle with a simple example:
这是我的 jsFiddle 一个简单的例子：
http://jsfiddle.net/shopguy/WjmHG/
http://jsfiddle.net/shopguy/WjmHG/
and the code for it:
以及它的代码：
<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>
I have no association with that hypergurl.com link used in my example, it was just the first example I could find of a page with an anchor by id/name syntax link in it.
我与我的示例中使用的那个 hypergurl.com 链接没有任何关联，这只是我能找到的第一个示例，其中包含一个带有 id/name 语法链接的锚点的页面。
If you load the JSFiddle and click the "Jump to Bottom" link inside the iFrame, it does nothing (testing with FireFox 19.0.2). When testing with various pages it never works in FireFox, in Chrome it sometimes works the first time it is clicked, but then if you scroll up and click again it doesn't work. In IE8 it works (scrolls) most of the time.
如果您加载 JSFiddle 并单击 iFrame 内的“跳转到底部”链接，则它不会执行任何操作（使用 FireFox 19.0.2 进行测试）。在使用各种页面进行测试时，它在 FireFox 中永远不起作用，在 Chrome 中它有时会在第一次单击时起作用，但是如果向上滚动并再次单击它就不起作用。在 IE8 中，它大部分时间都可以工作（滚动）。
Scrolling works correctly all of the time if I let the iFrame itself have the scrollbars (remove scrolling="no"). This isn't a practical solution for me though, as I have content outside of the frame that I want to scroll with it. In my real code I dynamically set the height of the iFrame to fill its content, this way it appears to be more like content on my page.
如果我让 iFrame 本身具有滚动条（删除 scrolling="no"），则滚动始终正常工作。不过，这对我来说不是一个实用的解决方案，因为我在框架之外有我想要滚动的内容。在我的实际代码中，我动态设置 iFrame 的高度以填充其内容，这样它看起来更像是我页面上的内容。
Additional info as to why I need to do this:
关于为什么我需要这样做的其他信息：
I'm creating a web-based email client and so far there seems to be the least amount of issues if I display the HTML body of emails inside an iframe, vs trying to display inside a table cell or div inside my page. I'd like for these type of links to work. I do have some control over the content, it comes from my server and I can modify it some (but don't want to hack it too much). For example, I already modify all links to open in a new window (but not links that start with #, so that isn't my issue).
我正在创建一个基于 Web 的电子邮件客户端，到目前为止，如果我在 iframe 内显示电子邮件的 HTML 正文，与尝试在我的页面内的表格单元格或 div 内显示相比，问题似乎最少。我希望这些类型的链接能够正常工作。我确实对内容有一些控制权，它来自我的服务器，我可以对其进行一些修改（但不想对其进行过多修改）。例如，我已经修改了所有链接以在新窗口中打开（但不是以 # 开头的链接，所以这不是我的问题）。
I know GMail doesn't use iFrames, but my XFINITY (by Comcast cable) web-based email client does, and they managed to get these to work (but so far haven't figured out what all they are doing).
我知道 GMail 不使用 iFrame，但我的 XFINITY（由 Comcast 电缆提供）基于 Web 的电子邮件客户端使用，并且他们设法让这些工作（但到目前为止还没有弄清楚他们在做什么）。
采纳答案by Sam
Check out this post: Jump Link Inside an iFrame
查看这篇文章：在 iFrame 中跳转链接
If your iframe has a different domain then you will be unable to use a javascript solution to solve this, but if it is then you can add the target="_parent" attribute to all the anchors within the 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';
回答by user2684310
I've recently added code to this library to sort out all the issue with Anchor Links inside an iFrame.
我最近向这个库添加了代码，以解决 iFrame 中锚链接的所有问题。
https://github.com/davidjbradshaw/iframe-resizer
https://github.com/davidjbradshaw/iframe-resizer
It intercepts all requests for in page navigation and scrolls the parent page to the correct position. If it doesn't find the anchor in the iFrame, it bubbles it up to the parent page and looks for it there.
它拦截页面导航的所有请求并将父页面滚动到正确的位置。如果它没有在 iFrame 中找到锚点，它会将它冒泡到父页面并在那里寻找它。
