Maison > Article > interface Web > Comment introduire des pages externes en HTML
Comment introduire des pages externes en HTML
- 小云云original
- 2018-03-29 16:31:093162parcourir
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 5e8304ee35d55ad9c18145a21a3f6a74.
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 d1a8716bbca693382eab805d6bb06c9f
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>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, 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 afeaa91bd55797efd28520d87cc51f8c回到顶部5db79b134e9f6b82c0b36e0489ee08ed
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");
});La structure DOM ajoutée via js a un impact sur le référencement (optimisation des moteurs de recherche), et les araignées Baidu ne peuvent pas l'explorer ! Dans des circonstances normales, il n’est pas recommandé de l’utiliser sauf en dernier recours. page1.html/page2.html/page3.html écrivez simplement le fragment Html requis, car il est chargé, c'est-à-dire un chargement asynchrone. Lorsque vous avez besoin d'obtenir des éléments de pages tels que page1.html, vous pouvez l'utiliser dans. conjointement avec setTimeout pour garantir que la page est chargée. Chargez-la dedans.
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!