Comment utiliser l'iframe-tutoriel HTML-php.cn

Comment utiliser l'iframe

清浅

Libérer： 2020-10-13 09:27:42

original

44831 Les gens l'ont consulté

iframe est un cadre en ligne qui peut intégrer un autre document dans la page HTML actuelle. Généralement, vous pouvez utiliser iframe pour intégrer directement la balise iframe dans la page et spécifier src.

Comment utiliser l'iframe

Certaines personnes disent que l'iframe est l'élément qui consomme le plus d'énergie et qu'il doit être utilisé le moins possible. Certaines personnes disent également que la sécurité des iframes est trop mauvaise et que leur utilisation devrait être réduite autant que possible. Même si ce qu’ils disent est vrai, la puissance des iframes ne peut être ignorée, et les entreprises qui l’utilisent ne manquent pas actuellement. La balise

<iframe> spécifie un cadre en ligne. Un cadre en ligne est utilisé pour intégrer un autre document dans le document HTML actuel.

Tous les principaux navigateurs prennent en charge la balise <iframe> Vous pouvez placer le texte d'invite entre <iframe> et , de sorte que les navigateurs qui ne prennent pas en charge <iframe>

Comment utiliser l'iframe ?

Habituellement, nous utilisons iframe pour intégrer directement le src spécifié par la balise iframe sur la page.

Par exemple :

<!-- 
<iframe> 标签规定一个内联框架
这里写p 标签是为了看align的效果     -->
<p style="overflow: hidden;">这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。         <iframe name="myiframe" id="myrame" src="external_file.html" frameborder="0" align="left" width="200" height="200" scrolling="no">
<p>你的浏览器不支持iframe标签</p>
 </iframe>
这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。</p>

Copier après la connexion

Attributs communs de l'iframe :

name : Spécifie le nom de <iframe>.
width : Spécifie la largeur de <iframe>.
hauteur : Spécifie la hauteur de <iframe>.
src : Spécifie l'URL du document affiché dans <iframe>.
frameborder : Spécifie s'il faut afficher la bordure autour de <iframe>. (0 signifie pas de bordure, 1 bit a une bordure).
align : Spécifie comment aligner <iframe> (gauche, droite, haut, milieu, bas).
défilement : Spécifie s'il faut afficher les barres de défilement dans <iframe>. (oui, non, auto)

L'attribut src de l'iframe dans le code ci-dessus est une page html locale

Le code est le suivant :

<body>
    <div id="div" style="height: 300px; background: #ddd;">这是一个外部文件里面的内容</div></body><script>
    var div = document.getElementById("div");
    console.log(div);</script>

Copier après la connexion

Oui Les parties interactives sont également écrites dans cette page, et l'iframe sera automatiquement transférée vers la page importée.

Comment récupérer le contenu dans l'iframe ?

var iframe = document.getElementById("myrame"); //获取iframe标签
    var iwindow = iframe.contentWindow; //获取iframe的window对象
    var idoc = iwindow.document; //获取iframe的document对象
    console.log(idoc.documentElement); //获取iframe的html
    console.log("body",idoc.body);

Copier après la connexion

Cependant, le DOM à l'intérieur ne peut pas être obtenu à partir de l'URL (c'est-à-dire le fichier html importé)

Avantages et inconvénients de l'iframe

Avantages :

Lors du rechargement de la page, vous n'avez pas besoin de recharger la page entière, mais seulement de recharger une page de cadre dans la page (réduire transmission de données, réduire le temps de chargement de la page Web);

La technologie est simple et facile à utiliser, et elle est principalement utilisée pour les pages qui ne nécessitent pas de moteurs de recherche pour rechercher

Il est pratique pour le développement et réduit le taux de duplication du code (comme l'en-tête de la page, le pied de page

Inconvénients :

générera beaucoup de pages) ; , ce qui n'est pas facile à gérer ;

n'est pas facile à imprimer

Plusieurs cadres La page augmentera le service et fera des requêtes HTTP

Le bouton retour du navigateur est ; invalide, etc.;

En raison de nombreuses lacunes, elle n'est pas conforme au concept de conception Web standard et a été abandonnée. La balise HTML5 actuelle n'est plus prise en charge.

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!