Javascript Définit Iframe Src

Michael Zippo 04.11.2021

La balise iframe HTML intègre un document Web dans une page Web. Un document pourrait être intégré au format PDF, page Web, ou toute autre ressource. L’attribut src définit l’emplacement de la ressource intégrée.

Vous pouvez intégrer le contenu d’un document web , comme un PDF ou une carte de Google Maps, sur une autre page, en utilisant HTML.

est o√π HTML </em> est disponible en. HTML <em>Le <iframe> </em> est utilisé à des objets externes comme d’ autres pages imbriquer Web en une seule page Web. Ce tutoriel va discuter, avec des exemples, comment utiliser le HTML <em><iframe> </em> pour incorporer les actifs web dans une page Web. </p> <h2> HTML iframe</h2><p>HTML iframes ou iFrames, afficher des documents Web externes sur une page. Vous pouvez intégrer des cartes, des fichiers PDF, des vidéos ou d’ autres ressources en utilisant la balise <iframe> balise HTML. </p> <p>Le code stocké dans un cadre en ligne est indépendante du reste d’une page Web. Tous les styles ou JavaScript applicables à votre page Web ne seront pas appliquées dans le iframe </p> <p>Voici la syntaxe HTML <em><iframe> </em> tag:. </p> <p>La balise <em><iframe> </em> est utilisé pour créer un iframe. Nous avons spécifié un iframe <em>src </em> attribut. L’attribut contient la position des éléments HTML que nous voulons incorporer dans notre page web. Cela devrait être un <a href="/url-vs-uri/"> HTML URL </a>. </p> <h2> Exemple HTML iframe</h2><p>Prenons un exemple pour explorer comment le <em><iframe> </em> fonctionne balise </p> </div> </div> <p>Supposons que vous construisez une site web pour une société historique locale à Washington, DC. Ils veulent créer une page avec une vidéo intégrée de Khan Academy sur la naissance de la Constitution des √âtats-Unis. Cette page est matériel recommandé pour toute personne intéressée à se joindre à la compagnie. Nous pouvons utiliser le code ci - dessous pour intégrer la vidéo sur notre site: </p> <p>Nos retours de code: </p> </a> </div> <chiffre class = "wp-block image"> <img src = "https://lh5.googleusercontent.com/B7_aNtKMRo5xi-n1RJKv6PbF3jGnedSEMOiboyASj-IdPDUErLGbwsrJ3AvdFby6ubXoc VAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf "alt =" B7 ANtKMRo5xi N1RJKv6PbF3jGnedSEMOiboyASj IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf "> </ figure> <p>Nous avons utilisé un <em><iframe> </em> pour intégrer une ressource Web externe à notre page Web. La ressource Web que nous avons construit est le lien "<a href="https://www.youtube.com/embed/Rk8dCnKIfP4" target="_blank" rel="noopener"> https://www.youtube.com/embed/Rk8dCnKIfP4 </a>" . Cela indique la vidéo que la société historique veut afficher sur son site Web. </p> <h4> attribut hauteur et la largeur du HTML iframe </h4> <p>La hauteur et la largeur sont utilisés pour définir la taille d’ un iframe . Disons que la société historique locale de Washington DC veut effectuer un zoom avant sur la vidéo sur leur site </p> <p>Nous allons définir la largeur vidéo YouTube à 500 pixels et la hauteur à 300 pixels. </p> <p>p> <p>Nos retours de code: </p> <figure class =" wp-block image "> <img src =" https: / /lh4.googleusercontent.com/YBnpQe9nKF00pYzt6ESAsx-siD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp-OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ "alt =" YBnpQe9nKF00pYzt6ESAsx SiD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ "> </ figure> <p>notre vidéo intégré est maintenant 500 pixels de large et 300 pixels de haut sur notre document HTML. Cela rend plus facile pour les gens de voir notre vidéo sur le site. </p> <p>Sinon, nous pourrions définir la <a href="/css-height-and-width/"> largeur et la hauteur de la balise iframe en utilisant le CSS </a>. Cependant, étant donné que HTML prend en charge un attribut de taille et le poids, ce n’est pas nécessaire. </p> <h2> Supprimer HTML bordure iframe</h2><p>Lorsque vous travaillez avec <em><iframe> </em>, vous avis que son contenu est entouré d’une bordure. Si vous souhaitez supprimer cette frontière, vous pouvez utiliser <a href="/css-borders/"> <em>border: none; </em> </a> <a href="/css-borders/"> attribut CSS </a>. </p> <p>la société historique nous a demandé de retirer la frontière autour de la vidéo YouTube de leur site. Voici le code que nous utiliserions pour supprimer la bordure: </p> <p>Nos retours de code: </p> <class figure = "wp-image-bloc"> <img src = "https://lh5.googleusercontent.com/GqIGiI370xPK2xxk-C_lCtJfww6i5MJY_NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF" alt = "GqIGiI370xPK2xxk C LCtJfww6i5MJY NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF"> </ figure> <p>notre vidéo maintenant , il n’a plus de frontière. </p> <h2> HTML iframe cible du lien</h2><p>en outre, vous pouvez utiliser <em><iframe> </em> balises comme cadre cible pour un lien . Nous pouvons mettre un iframe comme cadre cible pour un lien en utilisant l’attribut cible dans un lien HTML. L’attribut HTML cible doit se référer à l’attribut nom d’une <em><iframe> </em>. </p> <p>Supposons que la société historique avait une autre vidéo qu’ils voulaient montrer sur leur site web sur l’ article I la Constitution des √âtats-Unis. Cette vidéo a également été publié par Khan Academy </p> </a> </div> <p>Lorsque vous cliquez sur le bouton <em>naissance </em> texte sur la page Web, la vidéo <em>naissance de la Constitution des √âtats-Unis </em> devrait apparaaître dans le iframe. Lorsque le texte <em>article premier </em> est cliqué, la vidéo sur l’ article I de la Constitution devrait être rendue </p> <p>Nous pourrions utiliser le code suivant pour le faire. </p> <p>Nos retours de code: </p> <figure class = "wp -bloc- image"> <img src = "https: //lh4.googleusercontent.com/RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3_LXitgw2l3uX8Lq6Y2RcT xyYH5BxOkW4Iy OALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2-oJNxlwbz5OLQeqJr "alt ="> </ figure RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3 LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4IyOALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2 OJNxlwbz5OLQeqJr"> <p>Par défaut, la vidéo sur la naissance de la Constitution des √âtats-Unis est indiqué dans iframes. Le contenu de l’iframe change pour pointer vers la vidéo Khan Academy sur l’ article I de la Constitution. Cela se produit lorsque vous cliquez sur le <em>Article premier </em> URL </p> </div> <p>Notre iframe est redirigé vers la vidéo sur la naissance de la Constitution , si cette vidéo est pas déjà présent lorsque l’ on clique sur <em>Naissance </em>. </p> <h2> Conclusion</h2><p>Le code HTML <em><iframe> </em> balise Web englobe différentes ressources externes telles que les pages web dans une autre page Web. Ceci est utile si vous souhaitez ajouter des cartes, des fichiers, des vidéos ou d’ autres pages web sur votre site. </p> <p>Ce tutoriel a discuté, en se référant à des exemples, comment utiliser HTML <em><iframe> </em> pour les ressources Web render externes sur une page Web. Vous avez maintenant les connaissances nécessaires pour commencer à utiliser le <em><iframe> </em> balise comme un pro! </p> <p>Pour en savoir plus sur le codage HTML, lisez notre <a href="/ apprendre-html / "> <a </a> href="/learn-html/"> HyperText guide d’ apprentissage Markup </a>. </p>