jquery를 사용하여 iframe_jquery에서 페이지 앵커 실패 문제를 해결하세요.-JS 튜토리얼-php.cn

jquery를 사용하여 iframe_jquery에서 페이지 앵커 실패 문제를 해결하세요.

WBOY

풀어 주다： 2016-05-16 16:38:56

원래의

1633명이 탐색했습니다.

적용 시나리오는 다음과 같습니다. iframe 페이지에 스크롤 막대가 상위 양식에 나타나면 앵커 포인트가 현재 창 스크롤 막대를 기준으로 창을 스크롤하고 이후 사라지기 때문에 앵커 태그가 유효하지 않게 됩니다. 스크롤 막대는 자연스럽게 스크롤되지 않습니다.

해결책은 다음과 같습니다. js를 사용하여 페이지가 중첩되었는지 확인하고, js를 사용하여 상위 양식의 iframe 위치와 firame의 앵커 포인트 위치를 계산하고, 두 개를 추가하여 페이지의 스크롤링이 됩니다. 부모 양식.

문제 발생: 상위 양식 요소를 가져옵니다(도메인 제한으로 인해 모두 네트워크 환경(예: http://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&#63;a=b&c=d" style="width:100%;height:2060px;"></iframe>
<iframe name="iframe2" id="iframe2" src="iframe.html&#63;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].onload=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);
$(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" rel="external nofollow" >a</a>
<a href="#b" rel="external nofollow" >b</a>
<a href="#c" rel="external nofollow" >c</a>
<a href="#d" rel="external nofollow" >d</a>
<div><a href="" name=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" a">A</a></div>
<div><a href="" name=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" b">B</a></div>
<div><a href="" name=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" c">C</a></div>
<div><a href="" name=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" d">D</a></div>

</body>
</html>

로그인 후 복사