Comment introduire des pages externes en HTML (méthode des balises iframe)-tutoriel HTML-php.cn

Comment introduire des pages externes en HTML (méthode des balises iframe)

yulia

Libérer： 2018-09-25 16:29:32

original

3788 Les gens l'ont consulté

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的节点.123

Copier après la connexion

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>12

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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!