How to deal with page anchor failure in iframe

This time I will show you how to deal with page anchor failure in iframe. What are the precautions for handling page anchor failure in iframe? The following is a practical case, let's take a look.

The application scenario is: the iframe page does not have scroll bars. If a scroll bar appears in the parent form, the anchor mark will become invalid because the anchor scrolls the window based on the current window scroll bar and becomes a child form. If there is no scroll bar, it will naturally not scroll.

The solution is: use js to determine whether the page is nested, use js to calculate the position of the iframe in the parent form, the position of the anchor point in the firame, and add the two to become the scrolling of the parent form.

Encountered a problem: Get the parent form element (because of domain restrictions, all need to be in the network environment (ie http://domain.com)); the parent form nests multiple iframes, judge Whether it is the current iframe page.

Code:

Parent form page index.html

nbsp;html>


<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,
body{
width: 100%;
height: 100%;
}
</style>


<p></p>
<a>dd</a>
<a>ddd</a>
<iframe></iframe>
<iframe></iframe>

Sub form page iframe.html

nbsp;html>


<title></title>
<style>
a{
padding: 5px;
border: 1px solid #f00;
float: left;
display: block;
margin-right: 5px;
}
p{
width: 80%;
margin: 10px auto;
height: 500px;
border: 1px solid #f00;
font-size: 30px;
}
</style>
<script></script>
<script>
$(function(){
//如果是iframe则需要在网络中访问，因为js里有域限制
//如果没有iframe则不进行处理，
if(window!==window.top){
//获取top窗口中的iframe，如果有iframe嵌套过多，请自行修改
var iframeList=window.top.document.getElementsByTagName(&#39;iframe&#39;);
for(var i=0;i<iframeList.length;i++){
//判断当前窗口是否循环中的iframe
if(window.location.toString().indexOf(iframeList[i].getAttribute(&#39;src&#39;).toString())!=-1){
//等自己的所在iframe加载完成给a锚点加事件
window.top.document.getElementsByTagName(&#39;iframe&#39;)[i].onload=function(){
//确定iframe在父窗体的距顶部距离
var top = window.top.document.getElementsByTagName(&#39;iframe&#39;)[i].offsetTop;
$(&#39;a&#39;).each(function(){
var href = $(this).attr(&#39;href&#39;);
if(href.indexOf(&#39;#&#39;)!=-1){//判断是否是锚点而不是链接
var name = href.substring(href.indexOf(&#39;#&#39;)+1);
$(this).bind(&#39;click&#39;,function(){
$(&#39;a&#39;).each(function(){
if($(this).attr(&#39;name&#39;)==name){
//父窗口滚动
$(window.parent).scrollTop($(this).offset().top+top);
}
});
});
}
});
}
}
}
}
});
</script>


<a>a</a>
<a>b</a>
<a>c</a>
<a>d</a>
<p><a>A</a></p>
<p><a>B</a></p>
<p><a>C</a></p>
<p><a>D</a></p>

I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS jquery library implements iframe height and width adaptation (with code)

How to trigger iframe Parent window element event

Tab scroll navigation switching implementation (with code)

The above is the detailed content of How to deal with page anchor failure in iframe. For more information, please follow other related articles on the PHP Chinese website!