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.

页码

@H_301_6@<!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的代码

@H_301_6@<!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的一个限制,但希望你对这个问题的了解很开心.

猜你在找的HTML相关文章