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_403_3@

页码@H_403_3@

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Jump Link Test on an iFrame</title>
  6. </head>
  7. <body>
  8. <h1>Page that has an iFrame</h1>
  9. <iframe width="100%" height="2000" src="./iframe.html" frameborder="0" scrolling="no">
  10. </iframe>
  11. </body>
  12. </html>

iframe.html的代码@H_403_3@

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>iFrame Content</title>
  6. <style type="text/css">
  7. .Box {
  8. margin: 0 0 5px;
  9. width: 400px;
  10. height: 400px;
  11. }
  12. #Box1 {
  13. background-color: #f00;
  14. }
  15. #Box2 {
  16. background-color: #f0f;
  17. }
  18. #Box3 {
  19. background-color: #00f;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <ul>
  25. <li><a href="#Box1">Box 1</a></li>
  26. <li><a href="#Box2">Box 2</a></li>
  27.  
  28. <li><a href="#Box3">Box 3</a></li>
  29. </ul>
  30. <div>
  31. <div id="Box1" class="Box"></div>
  32. <div id="Box2" class="Box"></div>
  33. <div id="Box3" class="Box"></div>
  34. </div>
  35. </body>
  36. </html>

注意:如果我设置iframe高度<页面B的高度,问题将解决.但是,不幸的是,由于我无法访问page-A,因此我的情况不是一个选择.@H_403_3@

解决方法

这仅适用于HTML.

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

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

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

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

猜你在找的HTML相关文章