Javascript Imposta Iframe Src

Michael Zippo 04.11.2021

Il tag iframe HTML incorpora un documento web in una pagina web. Un documento incorporato potrebbe essere un PDF, una pagina Web o un’altra risorsa. L’attributo src definisce la posizione della risorsa incorporata.

Puoi incorporare i contenuti di un documento web, come un PDF o una mappa da Google Maps, su un’altra pagina, utilizzando HTML.

è qui che entra in gioco l’HTML </em>. L’HTML <em>Il tag <iframe></em> viene utilizzato per incorporare oggetti esterni come altre pagine web in una singola pagina web. Questo tutorial discuterà, con esempi, come utilizzare il tag HTML <em><iframe></em> per incorporare risorse web in una pagina web.</p> <h2>iframe HTML</h2> <p>Gli iframe HTML, o frame in linea, visualizzano documenti Web esterni su una pagina. Puoi incorporare mappe, PDF, video o altre risorse utilizzando il <iframe> Tag HTML.</p> <p>Il codice memorizzato all’interno di un frame in linea è indipendente dal resto di una pagina web. Tutti gli stili o JavaScript che si applicano alla tua pagina web non verranno applicati all’interno dell’iframe.</p> <p>Ecco la sintassi per il tag HTML <em><iframe></em>:</p> <p>Il tag <em><iframe></em> viene utilizzato per creare un iframe. Abbiamo specificato un attributo iframe <em>src</em>. L’attributo contiene la posizione degli elementi HTML che vogliamo incorporare nella nostra pagina web. Questo dovrebbe essere un <a href="/url-vs-uri/">URL HTML</a>.</p> <h2>Esempio di codice HTML iframe</h2> <p>Facciamo un esempio per esplorare come funziona il tag <em><iframe></em>.</p></div> </div> <p>Supponiamo di costruire un sito web per una società storica locale di Washington, DC. Vogliono che creiamo una pagina con un video incorporato della Khan Academy sulla nascita della Costituzione degli Stati Uniti. Questa pagina è materiale consigliato per chiunque sia interessato ad entrare a far parte della società. Potremmo utilizzare il seguente codice per incorporare il video nel nostro sito Web:</p> <p>Il nostro codice restituisce:</p> </a> </div> <class figura = "wp-block-image"> <img src = "https://lh5.googleusercontent.com/B7_aNtKMRo5xi-n1RJKv6PbF3jGnedSEMOiboyASj-IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf" alt = "B7 ANtKMRo5xi N1RJKv6PbF3jGnedSEMOiboyASj IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf" ></figure> <p>Abbiamo utilizzato un elemento <em><iframe></em> per incorporare una risorsa Web esterna nella nostra pagina Web. La risorsa Web che abbiamo incorporato è il collegamento "<a href="https://www.youtube.com/embed/Rk8dCnKIfP4" target="_blank" rel="noopener">https://www.youtube.com/embed/Rk8dCnKIfP4</a>". Questo indica il video che la società storica vuole mostrare sul proprio sito web.</p> <h4>Altezza e larghezza dell’iframe HTML</h4> <p>L’attributo altezza e larghezza sono usati per impostare la dimensione di un iframe. Supponiamo che la società storica locale di Washington DC voglia che ingrandiamo il video sul loro sito.</p> <p>Imposteremo la larghezza del video di YouTube su 500 pixel e l’altezza su 300 pixel:</p> <p>p> <p>Il nostro codice restituisce:</p> <figure class="wp-block-image"><img class="lazyload" data-src="https: //lh4.googleusercontent.com/YBnpQe9nKF00pYzt6ESAsx-siD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp-OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ" alt = "YBnpQe9nKF00pYzt6ESAsx SiD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ"> </ figure> <p>il nostro video incorporato è ora di larghezza 500 pixel e 300 pixel di altezza sul nostro documento HTML. Ciò rende più facile per le persone vedere il nostro video sul sito web.</p><p>In alternativa, potremmo impostare la <a href="/css-height-and-width/">larghezza e altezza del tag iframe utilizzando CSS</a>. Tuttavia, poiché HTML supporta un attributo altezza e peso, questo non è necessario.</p> <h2>Rimuovi bordo iframe HTML</h2> <p>Quando lavori con <em><iframe></em>, noterai che il suo contenuto è circondato da un bordo. Se vuoi rimuovere questo bordo, puoi utilizzare <a href="/css-borders/"><em>border:none;</em></a><a href="/css-borders/" > Attributo CSS</a>.</p> <p>La società storica ci ha chiesto di rimuovere il bordo attorno al video di YouTube dal loro sito. Ecco il codice che useremmo per rimuovere il bordo:</p> <p>Il nostro codice ritorna: </p> <class figura = "wp-block-image"> <img src = "https://lh5.googleusercontent.com/GqIGiI370xPK2xxk-C_lCtJfww6i5MJY_NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF" alt = "GqIGiI370xPK2xxk C LCtJfww6i5MJY NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF"> </ figure> <p>Il nostro video ora non ha più un bordo.</p> <h2>Target link iframe HTML</h2> <p>Inoltre, è possibile utilizzare i tag <em><iframe></em> come frame di destinazione per un collegamento. Possiamo impostare un iframe come frame di destinazione per un collegamento utilizzando l’attributo target in un collegamento HTML. L’attributo HTML di destinazione deve fare riferimento all’attributo name di un <em><iframe></em>.</p> <p>Supponiamo che la società storica avesse un altro video che voleva che mostrassimo sul suo sito web sull’articolo I di la Costituzione degli Stati Uniti. Questo video è stato pubblicato anche da Khan Academy.</p> </a></div><p>Quando si fa clic sul testo <em>Nascita</em> nella pagina Web, il video <em>Nascita della Costituzione degli Stati Uniti</em> dovrebbe essere visualizzato nell’iframe. Quando il testo <em>Articolo I</em> viene cliccato, il video sull’Articolo I della Costituzione dovrebbe essere reso.</p> <p>Potremmo usare il seguente codice per svolgere questo compito:</p> <p>Il nostro codice restituisce:</p> <figure class="wp -block-image"><img class="lazyload" data-src="https://lh4.googleusercontent.com/RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3_LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4Iy OALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2-oJNxlwbz5OLQeqJr" alt = "RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3 LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4IyOALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2 OJNxlwbz5OLQeqJr"> </ figure> <p>Per impostazione predefinita, il video sulla nascita della Costituzione degli Stati Uniti è mostrato nella iframe. Il contenuto dell’iframe cambia per puntare al video della Khan Academy sull’articolo I della Costituzione. Questo accade quando si fa clic sull’URL <em>Articolo I</em>.</p> </div> <p>Il nostro iframe viene reindirizzato al video sulla nascita della Costituzione se quel video non è già presente quando facciamo clic su <em>Nascita</em>.</p> <h2> Conclusione</h2> <p>Il tag HTML <em><iframe></em> incorpora risorse web esterne come pagine web in un’altra pagina web. Questo è utile se vuoi aggiungere mappe, file, video o altre pagine web al tuo sito.</p> <p>Questo tutorial ha discusso, con riferimento ad esempi, su come usare l’HTML <em><iframe></em> per eseguire il rendering di risorse web esterne su una pagina web. Ora hai le conoscenze necessarie per iniziare a utilizzare il tag <em><iframe></em> come un professionista!</p> <p>Per saperne di più sulla codifica in HTML, leggi il nostro <a href="/learn-html/"></a><a href="/learn-html/">guida all’apprendimento dell’HyperText Markup Language</a>.</p>