但是有一种HTML解决方法。

Question

在iframe内（在 page-A 上），我有一个简单的页面（ page-B ），它有一些跳转链接（例如<a href="#my-id">jump link</a> ）到页面的不同部分（ page-B ）。 iframe高度预设为长于 page-B 的高度;这是一项要求。

由于某些原因，跳转链接在FF上不起作用（我在Mac / FF 10.0.2上）;但是，它在Safari和IE8上运行正常。这是 sample 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>

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>

注意：如果我设置iframe高度＆lt; page-B 的高度，问题将得到解决。但是，遗憾的是，根据我的情况，这不是一个选项，因为我无法访问 page-A 。

Answer 1

仅限HTML无法实现。

正如你可以在Firefox Bug Report Nr. 638598上看到的那样，这是很久以前提到的！许多人也不喜欢这种行为，但Jonas Sicking says in his comment这种情况永远不会改变。他认为这是firefox阻止这种潜在黑客攻击功能的一项功能。

如果你不认识他read here that，他是mozilla web-api项目的技术主管，以及indexeddb和file-api规范的编辑W3C

其他人试图找到像Matthew这样的解决方案，但这个例子在我的html结构的简短测试用例中不起作用。 Some others say它应该与JavaScript和scrollTo()函数配合使用。

我很抱歉这只是FireFox的限制，但希望您对这个问题的知识保持安全。

Answer 2

我已经遇到过这个问题。在我的情况下，我无法使用JavaScript解决方案，因为我的iframe位于不同的域中，我无法访问父页面。

但是有一种HTML解决方法。

更改此链接：

<a href="#my-id">jump link</a>

对此：

<a target="_parent" href="http://parenturl.com/#my-id">jump link</a>

在您的父页面中创建一个不可见的<div id="my-id"></div>并使用CSS定位它。

Answer 3

嗯，只是想一想，你重置了iframe的边距吗？当您没有明确指定边距属性时，FF往往会做奇怪的事情。

在iFrame内跳转链接

3 个答案:

仅限HTML无法实现。

但是有一种HTML解决方法。