interface Web
tutoriel HTML
Comment introduire des pages externes en HTML (méthode des balises iframe)
Comment introduire des pages externes en HTML (méthode des balises iframe)
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 à La 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
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 Retour en haut.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
