Html 在 iFrame 内跳转链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9687085/
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
Jump Link Inside an iFrame
提问by moey
Inside an iframe (on page-A), I have a simple page (page-B) that has a few jump links (e.g. <a href="#my-id">jump link</a>) to different sections of the page (page-B). The iframe height is preset to be longer than page-B's height; this is a requirement.
在 iframe 内（在page-A 上），我有一个简单的页面（page-B），它有几个跳转链接（例如<a href="#my-id">jump link</a>）到页面的不同部分（page-B）。iframe 高度预设为大于page-B的高度；这是一个要求。
For some reasons, the jump links didn't work on FF (I am on Mac/FF 10.0.2); however, it worked properly on Safari and IE8. This is the sample page.
由于某些原因，跳转链接在 FF 上不起作用（我使用的是 Mac/FF 10.0.2）；但是，它在 Safari 和 IE8 上运行正常。这是示例页面。
Code of page
页面代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jump Link Test on an iFrame</title>
</head>
<body>
<h1>Page that has an iFrame</h1>
<iframe width="100%" height="2000" src="./iframe.html" frameborder="0" scrolling="no">
</iframe>
</body>
</html>
Code of iframe.html
iframe.html 代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>iFrame Content</title>
<style type="text/css">
.box {
margin: 0 0 5px;
width: 400px;
height: 400px;
}
#box1 {
background-color: #f00;
}
#box2 {
background-color: #f0f;
}
#box3 {
background-color: #00f;
}
</style>
</head>
<body>
<ul>
<li><a href="#box1">Box 1</a></li>
<li><a href="#box2">Box 2</a></li>
<li><a href="#box3">Box 3</a></li>
</ul>
<div>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
</div>
</body>
</html>
Note: If I set the iframe height < page-B's height, the problem will be solved. However, unfortunately this isn't an option given my situation because I have no access to page-A.
注意：如果我设置 iframe height < page-B的高度，问题就解决了。但是，不幸的是，鉴于我的情况，这不是一个选项，因为我无法访问page-A。
回答by Neysor
This is not possible with HTML only.
仅使用 HTML 是不可能的。
As you can read on the Firefox Bug Report Nr. 638598this is mentioned long time ago! Also many people don't like that behavior, but Jonas Sicking says in his commentthat this will never change. He sees that as a feature that firefox prevent this potential hacking functionality.
正如您在 Firefox Bug Report Nr上所读到的那样。638598这个早就提过了！也有很多人不喜欢这种行为，但乔纳斯·西金在他的评论中说这永远不会改变。他认为这是 Firefox 阻止这种潜在黑客功能的一项功能。
if you don't know him read here thathe is the Tech Lead of the web-apiproject at mozilla as well as an editor for the indexeddband file-apispecifications at W3C.
如果您不认识他，请阅读此处，他是mozilla的web-api项目的技术主管，也是W3C的indexeddb和file-api规范的编辑器。
Other people tried to find solutions like Matthewbut this example didn't work in my short test case with your html structure. Some others saythat it should work with JavaScript and the scrollTo()Function.
其他人试图找到像Matthew这样的解决方案，但是这个例子在我的 html 结构的简短测试用例中不起作用。其他一些人说它应该与 JavaScript 和scrollTo()Function 一起工作。
I'm sorry for saying that this is a limitation of FireFox only, but hope you are happy to be safe in the knowledge about that problem.
我很抱歉说这只是 FireFox 的限制，但希望您很高兴能够安全地了解该问题。
回答by Cesar Canassa
I already ran into this issue. In my case I could not use a javascript solution because my iframe was in a different domain and I had no access to the parent page.
我已经遇到了这个问题。就我而言，我无法使用 javascript 解决方案，因为我的 iframe 位于不同的域中，而且我无法访问父页面。
But there is a HTML workaround.
但是有一个 HTML 解决方法。
Change your link from this:
从此更改您的链接：
<a href="#my-id">jump link</a>
To this:
对此：
<a target="_parent" href="http://parenturl.com/#my-id">jump link</a>
And create a invisible <div id="my-id"></div>in your parent page and position it using CSS.
并<div id="my-id"></div>在您的父页面中创建一个不可见的页面并使用 CSS 对其进行定位。
回答by rvazquez
Mmm, just a thought, have you reset margins for the iframe? FF tends to do weird things when you don't explicitly specify margin attributes.
嗯，只是一个想法，你有没有重置 iframe 的边距？当您没有明确指定边距属性时，FF 往往会做一些奇怪的事情。
