Comment introduire des pages externes en HTML
Habituellement, la tête, le pied et la barre droite (entrées à droite) d'un site Web sont les mêmes. Cette partie du contenu peut être introduite. Sinon, une fois qu'elle doit être modifiée, dix, vingt ou même plus le seront. La page doit être modifiée est une tâche fastidieuse mais dénuée de sens. Avec l'aide de PHP ou JSP, ce problème peut être facilement résolu en utilisant include, mais si nous nous éloignons du langage back-end, ce problème peut-il être résolu du point de vue front-end ?
1. Avec l'aide d'iframe
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. continuez à utiliser iframe. Il existe un attribut frameboder. Définissez la valeur de l'attribut sur 0 ou non pour supprimer la bordure iframe. Ensuite, réglez 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的节点.Parce 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>Cliquez sur "Détails" pour accéder à l'emplacement de <a name = "detail">.
b. Utilisez l'attribut id de la balise
<a href = "#detail">详情</a>
<p id = "detail"></p> pour cliquer sur "Détails" pour accéder à l'emplacement de <p id = "detail">
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 l'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é qu'il est impossible d'y parvenir simplement via le HTML, mais cela peut être fait. avec l'aide de JS.
<!doctype html><html lang="en">
<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>
<p><img src = "img/photo1.jpg" width="500px"/></p>
<iframe src="test1.html" height= "100px" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"></iframe>
<p><img src = "img/photo2.jpg" width="500px"/></p>
<p><img src = "img/photo3.jpg" width="500px" /></p>
<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>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, vous pouvez utiliser parent pour localiser le HTML parent, et vous pouvez utiliser top pour localiser le HTML de niveau supérieur
Lors d'un appel entre iframes au même niveau, vous devez localiser le HTML parent. d'abord, puis localisons l'iframe.
Supplémentaire Découvrons le point d'ancrage. Sa fonction clé est le #detail ajouté après l'adresse de connexion (le détail n'y fait référence qu'en général 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
L'adresse URL a un identifiant "#" à la fin, indiquant qu'elle doit 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é.
Retournez en haut de la page. En plus de définir le scrollTop du corps via JS (0 revient en haut, le définit à la hauteur du corps et saute vers le haut), une autre méthode est <a href = "#">回到顶部</a>
load(url, data, callback) ; url est l'URL de la page Web HTML à charger ; data : clé/valeur envoyée au serveur ; callback : fonction de rappel lorsque le chargement est réussi.
$(function(){
$("selector1").load("page1.html");
$("selector2").load("page2.html");
$("selector3").load("page3.html");
});3、使用HTML imports
HTML imports提供了一种在一个HTML文档中包含和重用另一个HTML文档的方法。目前谷歌已经全面支持HTML imports，Opera35版本之后支持，但是FF依旧不支持。(在谷歌的地址栏输入:chrome://flags,启动或禁止一些功能)
尽管目前HTML imports的兼容不是很好，但是我们还是有必要了解其使用方法，W3C已经发布了HTML imports的标准草案，相信后期应该还是会用得比较普遍的。使用HTML imports
<!doctype html><html lang="en">
<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>
<link rel = "import" href = "test1.html"/>
</head>
<body>
<p id = "content"></p>
</body></html><script>
var post = document.querySelector("link[rel = 'import']").import; var con = post.querySelector("p");
document.querySelector("#content").appendChild(con.cloneNode(true)); var clone = document.importNode(con,true)
document.querySelector("#content").appendChild(clone)</script>给出了两种将import进来的html中我们需要的部分插入到当前html.
最后简单介绍document.querySelector和document.querySelectorAll，这两个方法是HTML5在Web API中新引入的方法，大大简化了在原生Javascript代码中选取元素。
document.querySelector和document.querySelectorAll都是接收一个字符串作为参数，这个参数需要符合CSS选择语法，即:标签、类选择器、ID选择器，属性选择器(E[type=”XX”]),结构选择器(:nth-child(n))等。不支持伪类选择器。
document.importNode(node,deep)方法把一个节点从另一个文档复制到该文档以便应用，第二个值为true，那么将该节点的所有子孙节点也复制过来。
node.cloneNode(deep):对已有的节点进行克隆,deep值为true，表示克隆其子孙节点。如果deep为false，则只克隆该节点自身。
除了以上方法外，目前更为主流的一种方式是使用组件化开发。每一部分作为一个组件。
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)
Sujets chauds
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.
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.
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.
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.
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.
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.
Comment analysez-vous et traitez-vous HTML / XML dans PHP?
Feb 07, 2025 am 11:57 AM
Ce tutoriel montre comment traiter efficacement les documents XML à l'aide de PHP. XML (Language de balisage extensible) est un langage de balisage basé sur le texte polyvalent conçu à la fois pour la lisibilité humaine et l'analyse de la machine. Il est couramment utilisé pour le stockage de données et
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.
