html – 在iFrame中跳转链接

前端之家收集整理的这篇文章主要介绍了html – 在iFrame中跳转链接前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在一个iframe(在A页)中,我有一个简单的页面(页面B),它有一些跳转链接(例如< a href =“#my-id”> jump link< / a>))到不同的页面部分(第B页). iframe高度预设为长于页面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高度<页面B的高度,问题将解决.但是,不幸的是,由于我无法访问page-A,因此我的情况不是一个选择.

解决方法

这仅适用于HTML.

你可以在Firefox Bug Report Nr. 638598上阅读这个很久以前就提到!还有很多人不喜欢这种行为,但Jonas Sicking says in his comment这样做永远不会改变.他认为,firefox可以防止这种潜在的黑客功能.

如果你不认识他read here that,他就是07年3月在莫西亚的web-api项目的技术负责人,W3C indexeddbfile-api的编辑.

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

我很抱歉说这只是FireFox的一个限制,但希望你对这个问题的了解很开心.

原文链接:https://www.f2er.com/html/230934.html

猜你在找的HTML相关文章