前端html小技巧—如何解决iframe页面锚点失效

最新推荐文章于 2025-04-07 13:20:53 发布

云南仟龙Mark

最新推荐文章于 2025-04-07 13:20:53 发布

阅读量1.3k

点赞数

文章标签：前端 html javascript

原文链接：https://blog.51cto.com/u_15111999/4848172

版权

今天分享下”前端html小技巧—如何解决iframe页面锚点失效“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。应用场景如下：iframe页面上没有滚动条。如果父窗中出现滚动条，锚点标记将失效，因为锚点将根据当前窗口滚动条滚动窗口。成为子窗后，没有滚动条，自然不会滚动。

解决办法是:用js用j判断页面是否嵌套s计算iframe在父窗体位置，锚点在firame在中间位置，两者结合成父窗滚动。

遇到问题:获取父窗体元素(域限制，所有元素都需要在网络环境中定位(即h)ttp://domain.com））；父窗体嵌套多个iframe判断是否是当前iframe页面。

代码：

父窗体页面 index.html

复制代码

代码如下:

<!doctype html>

<html>

<head>

<title></title>

<style type="text/css">

*{

margin: 0;

padding: 0;

border: 0;

}

html,

body{

width: 100%;

height: 100%;

}

</style>

</head>

<body>

<div style="width:100%;background:#f00;height:500px;"></div>

<a href="">dd</a>

<a href="">ddd</a>

<iframe name="iframe2" id="iframe2" src="iframe.html?a=b&c=d" style="width:100%;height:2060px;"></iframe>

<iframe name="iframe2" id="iframe2" src="iframe.html?a=d&c=b" style="width:100%;height:2060px;"></iframe>

</body>

</html>



子窗体页面iframe.html



复制代码

代码如下:

<!doctype html>

<html>

<head>

<title></title>

<style type="text/css">

a{

padding: 5px;

border: 1px solid #f00;

float: left;

display: block;

margin-right: 5px;

}

div{

width: 80%;

margin: 10px auto;

height: 500px;

border: 1px solid #f00;

font-size: 30px;

}

</style>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

$(function(){

//如果是iframe则需要在网络中访问，因为js里有域限制

//如果没有iframe则不进行处理，

if(window!==window.top){

//获取top窗口中的iframe，如果有iframe嵌套过多，请自行修改

var iframeList=window.top.document.getElementsByTagName('iframe');

for(var i=0;i<iframeList.length;i++){

//判断当前窗口是否循环中的iframe

if(window.location.toString().indexOf(iframeList[i].getAttribute('src').toString())!=-1){

//等自己的所在iframe加载完成给a锚点加事件

window.top.document.getElementsByTagName('iframe')[i].οnlοad=function(){

//确定iframe在父窗体的距顶部距离

var top = window.top.document.getElementsByTagName('iframe')[i].offsetTop;

$('a').each(function(){

var href = $(this).attr('href');

if(href.indexOf('#')!=-1){//判断是否是锚点而不是链接

var name = href.substring(href.indexOf('#')+1);

<p> http://www.qlyl1688.com </p>

$(this).bind('click',function(){

$('a').each(function(){

if($(this).attr('name')==name){

//父窗口滚动

$(window.parent).scrollTop($(this).offset().top+top);

}

});

});

}

});

}

}

}

}

});

</script>

</head>

<body>

<a href="#a">a</a>

<a href="#b">b</a>

<a href="#c">c</a>

<a href="#d">d</a>

<div><a href="" name="a">A</a></div>

<div><a href="" name="b">B</a></div>

<div><a href="" name="c">C</a></div>

<div><a href="" name="d">D</a></div>

</body>

</html>