Javascript instellen Iframe Src

Michael Zippo

De iframe HTML-tag sluit een webdocument in op een webpagina. Een ingesloten document kan een PDF, een webpagina of een andere bron zijn. Het src-attribuut definieert de locatie van de on-board resource.

U kunt de inhoud van een webdocument , zoals een PDF of een kaart van Google Maps, op een andere pagina, met HTML.

Hier komt HTML </em> om de hoek kijken. HTML <em>De < iframe></em> tag wordt gebruikt om externe objecten zoals andere webpagina`s in een enkele webpagina in te sluiten. In deze zelfstudie wordt met voorbeelden uitgelegd hoe u de HTML <em><iframe></em>-tag gebruikt om webbronnen in een webpagina in te sluiten.</p><h2>HTML iframe</h2><p>HTML iframes, of ingesloten frames, geven externe webdocumenten weer op een pagina. U kunt kaarten, pdf`s, video`s of andere bronnen insluiten met behulp van de HTML <iframe>-tag .</p><p>De code die is opgeslagen in een inline frame is onafhankelijk van de rest van een webpagina. Stijlen of JavaScript die van toepassing zijn op uw webpagina, worden niet toegepast in het iframe.</p><p>Hier is de syntaxis van de HTML <em><iframe></em>-tag:</p> <p>Het <em><iframe ></em> tag wordt gebruikt om een iframe te maken. We hebben een iframe <em>src</em> attribuut gespecificeerd. Het attribuut bevat de positie van de HTML-elementen die we in onze webpagina willen insluiten. Het moet een <a href="/url-vs-uri/"> HTML-URL </a> zijn.</p><h2>Voorbeeld HTML-iframe</h2><p>Laten we een voorbeeld nemen om te onderzoeken hoe de <em><iframe></em>-tag werkt.</p> </div> </div> <p>Stel dat je een website bouwt voor een lokale historische zaken in Washington, DC. Ze willen dat we een pagina maken met een ingesloten video van Khan Academy over de geboorte van de Amerikaanse grondwet. Deze pagina is aanbevolen materiaal voor iedereen die geïnteresseerd is om lid te worden van het bedrijf. We kunnen de volgende code gebruiken om de video op onze website in te sluiten:</p> <p>Onze code geeft als resultaat:</p> </a> </div> < figuur class = "wp-beeld-block"> <img src = "https://lh5.googleusercontent.com/B7_aNtKMRo5xi-n1RJKv6PbF3jGnedSEMOiboyASj-IdPDUErLGbwsrJ3AvdFby6ubXoc VAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf" alt = "B7 ANtKMRo5xi N1RJKv6PbF3jGnedSEMOiboyASj IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf"> </ getal> <p> used een <em><iframe></em> om een externe webbron op onze webpagina in te sluiten. De webbron die we hebben gebouwd, is de link "<a href="https://www.youtube.com/embed/Rk8dCnKIfP4" target="_blank" rel="noopener"> https://www.youtube.com / embed / Rk8dCnKIfP4 </a> ". Dit geeft de video aan die de historische vereniging op haar website wil tonen.</p><h4> Hoogte en breedte van het HTML-iframe </h4> <p>Het kenmerk height en width wordt gebruikt om de grootte van een iframe te definiëren . Stel dat de plaatselijke historische vereniging in Washington DC wil dat we de video op hun site vergroten.</p><p>We gaan de breedte van de YouTube-video instellen op 500 pixels en de hoogte op 300 pixels:</p><p> p>p> <p>Onze code geeft als resultaat:</p><figure class = "wp-image-block"> <img src = "https: / / lh4.googleusercontent.com/YBnpQe9nKF00pYzt6ESAsx-siD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp-OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ "alt =" YBnpQe9nKF00pYzt6ESAsx SiD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ "> </ figuur> <p> onze embedded video is nu 500px breed en 300px hoog op onze HTML-document. Dit maakt het gemakkelijker voor mensen om onze website te bekijken</p>op de </ figure> <p>website.</p>> Als alternatief kunnen we de <a href="/css-height-and-width/ definiëren "> breedte en hoogte van de iframe-tag met behulp van CSS </a>. Aangezien HTML echter een hoogte- en gewichtsattribuut ondersteunt, is dit niet nodig.</p><h2>Verwijder de rand van HTML iframe</h2><p>Als u met <em><iframe></em> werkt, moet u merk op dat de inhoud is omgeven door een rand. Als je deze rand wilt verwijderen, kun je <a href="/css-borders/"> <em>border: none ;</em> </a> <a href="/css-borders/"> gebruiken CSS-kenmerk </a>.</p><p>De historische vereniging heeft ons gevraagd de rand rond de YouTube-video van hun site te verwijderen. Hier is de code die we zouden gebruiken om de rand te verwijderen:</p> <p>Onze code geeft als resultaat:</p> <class face = "wp-image-block"> <img src = "https://lh5.googleusercontent.com/GqIGiI370xPK2xxk-C_lCtJfww6i5MJY_NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF" alt = "C GqIGiI370xPK2xxk LCtJfww6i5MJY NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF"> </ figuur> <p> nu onze video heeft geen rand meer.</p><h2>Doel van HTML iframe-link</h2><p>Bovendien kunt u <em><iframe></em>-tags gebruiken als doelframe voor een link . We kunnen een iframe definiëren als het doelframe voor een link met behulp van het doelattribuut in een HTML-link. Het doel-HTML-attribuut moet verwijzen naar het name-attribuut van een <em><iframe></em>.</p><p>Stel dat de historische vereniging een andere video heeft die ze willen dat we op hun website tonen op Artikel I van de Amerikaanse grondwet. Deze video is ook geplaatst door Khan Academy.</p> </a> </div> <p>Als u op de tekst <em>Birth</em> op de webpagina klikt, wordt de video <em>Birth of the Constitution of the States - United</em> moet in het iframe verschijnen. Wanneer op de tekst <em>Artikel I</em> wordt geklikt, moet de video over artikel I van de Grondwet worden weergegeven.</p><p>We zouden de volgende code om dit te doen:</p> <p>Onze code retourneert:</p><figure class = "wp -block-image"> <img src = "https: //lh4.googleusercontent.com/RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjj sS4aQYQF7vZDr3_LXitgw2l3uX8Lq6Y2RcT xyYH5BxOkW4Iy OALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2-oJNxlwbz5OLQeqJr "alt ="> </ figuur RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3 LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4IyOALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2 OJNxlwbz5OLQeqJr "> <p> Door Standaard wordt de video op de geboorte van de grondwet van de Verenigde Staten, vermeld in iframes. de inhoud van het iframe verandert om te verwijzen naar de Khan Academy-video over artikel I van de grondwet. Dit gebeurt wanneer u op de <em>Artikel I</em>-URL klikt.</p> </div> <p>Ons iframe wordt doorgestuurd naar de video over de geboorte van de Grondwet als deze video nog niet aanwezig is wanneer we op <em>Geboorte</em> klikken.</p><h2>Conclusie</h2><p>De HTML <em><iframe></em>-tag sluit externe webbronnen in, zoals webpagina`s, in een andere webpagina. Dit is handig als u kaarten, bestanden, video`s of andere webpagina`s aan uw site wilt toevoegen.</p><p>In deze zelfstudie wordt aan de hand van voorbeelden uitgelegd hoe u HTML <em><iframe></em gebruikt > om externe webbronnen op een webpagina weer te geven.U hebt nu de kennis om de <em><iframe></em>-tag als een professional te gaan gebruiken!</p><p>Voor meer informatie over HTML-codering, lees onze <a href="/learn-html / "> </a> <a href="/learn-html/?> Leergids hypertext opmaaktaal </a>.</p>