Maison > Article > interface Web > Comment introduire des pages externes en HTML (méthode des balises iframe)
Comment introduire des pages externes en HTML (méthode des balises iframe)
- yuliaoriginal
- 2018-09-25 16:29:323774parcourir
Lors de la mise en page, certaines pages externes seront introduites dans HTML. Cet article vous expliquera comment introduire la méthode de balise iframe des pages externes dans HTML. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile.
Tout d'abord, la chose la plus simple à penser est d'utiliser iframe. Bien que html5 ait aboli le frame, il conserve toujours l'iframe a un attribut frameboder. ou non. Supprimez les bordures de l'iframe. Réglez ensuite le défilement sur non. C'est tout à fait faisable, mais n'oubliez pas de l'exécuter dans un environnement serveur.
var frame = document.getElementsByTageName("iframe")[0];
frame.contentWindow.document.XXX方法,
如frame.contentWindow.document.querySelector("#btn");//获取iframe中Id为btn的节点.123Parce que je n'ai aucune expérience de l'utilisation d'iframe pour introduire l'en-tête auparavant, étant donné que l'en-tête a généralement une autre fonction que le saut, il doit être positionné. Lorsque la page est longue, cliquez pour la positionner avec précision. vers quelque part. Le saut de page n'a aucun effet s'il est introduit via iframe, mais qu'en est-il du point d'ancrage ? Vous devez essayer ceci pour savoir.
Ici, ajoutez quelques connaissances sur les points d'ancrage :
Les points d'ancrage peuvent sauter à la position correspondante de la page actuelle, et peuvent également sauter à la position correspondante d'autres pages.
Il existe deux façons d'implémenter des points d'ancrage, l'une est un attribut tag + name et l'autre consiste à utiliser l'attribut Id de la balise.
Les détails sont les suivants :
a. Utilisez l'attribut a tag + name
<a href = "#detail">详情</a> <a name = "detail"></a>12
Cliquez sur "Détails" et accédez à 9954ee8a49fc0e880188e4862426c94dLa position.
b. Utilisez l'attribut id de la balise
<a href = "#detail">详情</a> <div id = "detail"></div>12
Cliquez sur "Détails" pour accéder à la position 700814910a0bb0f3fa58e1f941cbe817 .
Le point d'ancrage échoue souvent lors de l'utilisation de a+name, il est donc recommandé d'utiliser id pour lier le point d'ancrage.
Pour en revenir au sujet, après avoir introduit l'iframe, pouvons-nous localiser la position correspondante en cliquant sur l'élément dans l'iframe ? Ici, nous utilisons iframe pour introduire head.html, ce qui est aussi mon objectif initial ?
Donc, ce que nous voulons réaliser est : cliquez sur la balise a de l'iframe et localisez la position correspondante du HTML principal. Grâce à l'implémentation, nous avons constaté que cela ne peut pas être réalisé simplement via HTML, mais cela peut l'être. fait avec l'aide de JS.
<!doctype html>
<html>
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<title>Document</title>
<!--css js 文件的引入-->
<style>
#leftFrame{display:block;}
</style>
</head>
<body>
<div><img src = "img/photo1.jpg" width="500px"/></div>
<iframe src="test1.html" height= "100px" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"></iframe>
<div><img src = "img/photo2.jpg" width="500px"/></div>
<div><img src = "img/photo3.jpg" width="500px" /></div>
<p id = "buttom">detail</p>
</body>
</html>
<script>
window.onload = function(){
var iframe = document.querySelector("#leftFrame");
var bot = iframe.contentWindow.document.querySelector("#bot");
var top = iframe.contentWindow.document.querySelector("#top");
bot.onclick = function(){
document.body.scrollTop = document.body.offsetHeight;
};
top.onclick = function(){
document.body.scrollTop = 0;
};
};
</script>Il y a des éléments avec les identifiants bot et top dans l'iframe. Le positionnement est réalisé via JS.
Dans la page principale, le document dans l'iframe peut être renvoyé en tant qu'objet HTML via iframe.contentWindow, et l'objet renvoyé peut être traité via toutes les méthodes DOM standard.
Dans la page iframe, localisez le HTML parent via parent, et vous pouvez localiser le HTML de niveau supérieur via top
Lors d'un appel entre iframes au même niveau, vous devez localiser le. html parent d'abord, puis localisez l'iframe.
Ajoutez quelques connaissances sur les points d'ancrage. La fonction clé est le #detail ajouté après l'adresse de connexion (le détail est juste une référence générale si l'URL actuelle est localhost). 8080/index.html. Ensuite, après le point d'ancrage, l'url doit être localhost:8080/index.html#detail
Il y a un identifiant "#" à la fin de l'adresse URL, indiquant qu'elle a besoin pour accéder à l'emplacement correspondant. #idName, le navigateur trouvera une balise qui correspond aux caractéristiques de "#idName" sur la page. Si le caractère suivant "#" dans l'URL est introuvable dans le texte, s'il s'agit de la page actuelle, alors il ne sautera pas. S'il saute d'une autre page, le haut de la page sera affiché.
Retour en haut de la page. En plus de définir le scrollTop du corps via JS (0 revient en haut, le règle à la hauteur du corps, saute vers le haut), une autre méthode. est fdb1f4b5d831a8c25a3f2f6fa4c446f8Retour en haut5db79b134e9f6b82c0b36e0489ee08ed.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!