html – 在iFrame中跳转链接

发布时间:2020-01-24 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了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的一个限制,但希望你对这个问题的了解很开心.

总结

以上是脚本之家为你收集整理的html – 在iFrame中跳转链接全部内容,希望文章能够帮你解决html – 在iFrame中跳转链接所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: