Heim > Artikel > Web-Frontend > So gehen Sie mit Seitenankerfehlern im Iframe um

So gehen Sie mit Seitenankerfehlern im Iframe um

php中世界最好的语言Original: 2018-04-26 10:40:452116Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie mit Seitenankerfehlern im Iframe umgehen. Was sind die Vorsichtsmaßnahmen für den Umgang mit Seitenankerfehlern im Iframe?

Das Anwendungsszenario ist: Die Iframe-Seite verfügt nicht über Bildlaufleisten im übergeordneten Formular, die Ankermarkierung wird ungültig, da der Anker das Fenster basierend auf der Bildlaufleiste des aktuellen Fensters scrollt wird zu einem untergeordneten Formular. Wenn keine Bildlaufleiste vorhanden ist, wird natürlich nicht gescrollt.

Die Lösung lautet: Bestimmen Sie mit js, ob die Seite verschachtelt ist, berechnen Sie mit js die Position des Iframes im übergeordneten Formular und die Position des Ankerpunkts im Firame und addieren Sie die beiden, um zu werden das Scrollen des übergeordneten Formulars.

Es ist ein Problem aufgetreten: Holen Sie sich das übergeordnete Formularelement (aufgrund von Domänenbeschränkungen müssen sich alle in der Netzwerkumgebung befinden (z. B. http://domain.com)); beurteilen Sie, ob das übergeordnete Formular mehrere Iframes verschachtelt Es ist die aktuelle Iframe-Seite.

Code:

Übergeordnete Formularseite 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>
<p style="width:100%;background:#f00;height:500px;"></p>
<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>

Unterformularseite 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;
}
p{
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>
<p><a href="" name=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" a">A</a></p>
<p><a href="" name=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" b">B</a></p>
<p><a href="" name=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" c">C</a></p>
<p><a href="" name=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" d">D</a></p>
</body>
</html>

Ich glaube, Sie haben es gemeistert, nachdem Sie den Fall gelesen haben In diesem Artikel Weitere spannende Methoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS+jquery-Bibliothek zur Implementierung der Iframe-Höhen- und Breitenanpassung (mit Code)

Anleitung Iframe-Trigger-Ereignis für übergeordnetes Fensterelement implementieren

Implementierung zum Umschalten der Tab-Scroll-Navigation (mit Code)

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit Seitenankerfehlern im Iframe um. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Schritte zum Abrufen des Dokumentobjekts im IframeNächster Artikel：Detaillierte Erläuterung der Schritte zum Abrufen des Dokumentobjekts im Iframe

In Verbindung stehende Artikel

Mehr sehen