Zestaw JavaScript iframe Src

Michael Zippo

Tag HTML iframe osadza dokument internetowy na stronie internetowej. Osadzonym dokumentem może być plik PDF, strona internetowa lub inny zasób. Atrybut src określa lokalizację zasobu wbudowanego.

Można osadzić zawartość dokumentu internetowego , np. PDF lub mapa z Google Maps, na innej stronie, używając HTML.

W tym miejscu wkracza HTML </em>. HTML <em>< Tag iframe></em> służy do osadzania zewnętrznych obiektów, takich jak inne strony internetowe, na jednej stronie internetowej. Ten samouczek wyjaśni z przykładami, jak używać tagu HTML <em><iframe></em> do osadzania zasobów internetowych na stronie internetowej.</p><h2>HTML iframe</h2><p>HTML iframe lub osadzone ramki wyświetlają zewnętrzne dokumenty internetowe na stronie. Mapy, pliki PDF, filmy lub inne zasoby można osadzić za pomocą tagu HTML <iframe> .</p><p>Kod przechowywany w ramce wbudowanej jest niezależny od reszty strony internetowej. Style lub JavaScript, które mają zastosowanie do Twojej strony internetowej, nie zostaną zastosowane w iframe.</p><p>Oto składnia tagu HTML <em><iframe></em>:</p> <p><em><iframe Tag ></em> służy do tworzenia elementu iframe. Określiliśmy atrybut <em>src</em> iframe. Atrybut zawiera pozycję elementów HTML, które chcemy osadzić na naszej stronie internetowej. Powinien to być <a href="/url-vs-uri/"> URL HTML </a>.</p><h2>Przykład iframe HTML</h2><p>Weźmy przykład, aby zbadać, jak Tag <em><iframe></em> działa.</p> </div> </div> <p>Załóżmy, że budujesz stronę internetową dla lokalnego historyczny biznes w Waszyngtonie. Chcą, abyśmy utworzyli stronę z osadzonym filmem z Khan Academy na temat narodzin Konstytucji Stanów Zjednoczonych. Ta strona jest polecanym materiałem dla wszystkich zainteresowanych przystąpieniem do firmy. Możemy użyć następującego kodu, aby osadzić wideo na naszej stronie internetowej:</p> <p>Nasz kod zwraca:</p> </a> </div> < figura klasa = "WP OBRAZU blok"> <img src = "https://lh5.googleusercontent.com/B7_aNtKMRo5xi-n1RJKv6PbF3jGnedSEMOiboyASj-IdPDUErLGbwsrJ3AvdFby6ubXoc VAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf" alt = "B7 ANtKMRo5xi N1RJKv6PbF3jGnedSEMOiboyASj IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf"> </postać> <s> stosowany <em><iframe></em>, aby umieścić zewnętrzny zasób sieciowy na naszej stronie internetowej. Zbudowany przez nas zasób sieciowy to link „<a href="https://www.youtube.com/embed/Rk8dCnKIfP4" target="_blank" rel="noopener"> https://www.youtube.com / embed / Rk8dCnKIfP4 </a> ”. Wskazuje wideo, które społeczeństwo historyczne chce pokazać na swojej stronie internetowej.</p><h4> Wysokość i szerokość elementu iframe HTML </h4> <p>Atrybut height i width służą do określenia rozmiaru elementu iframe . Załóżmy, że lokalne społeczeństwo historyczne w Waszyngtonie chce, abyśmy powiększyli wideo w ich witrynie.</p><p>Ustawimy szerokość wideo YouTube na 500 pikseli, a wysokość na 300 pikseli:</p><p> p>p> <p>Nasz kod zwraca:</p><figure class = "wp-image-block"> <img src = "https: / / lh4.googleusercontent.com/YBnpQe9nKF00pYzt6ESAsx-siD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp-OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ "alt =" YBnpQe9nKF00pYzt6ESAsx SiD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ „> </ figure> <p> nasz film jest osadzony teraz 500px szerokości i 300px wysoko na naszym dokumencie HTML. Ułatwia to ludziom przeglądanie naszej witryny</p>na </ rysunek> <p>witrynie internetowej.</p>> Alternatywnie możemy zdefiniować <a href="/css-height-and-width/ "> szerokość i wysokość tagu iframe za pomocą CSS </a>. Ponieważ jednak HTML obsługuje atrybuty wysokości i wagi, nie jest to konieczne.</p><h2>Usuń obramowanie z elementu iframe HTML</h2><p>Podczas pracy z <em><iframe></em> zauważ, że jego zawartość jest otoczona ramką. Jeśli chcesz usunąć to obramowanie, możesz użyć <a href="/css-borders/"> <em>border: none ;</em> </a> <a href="/css-borders/"> Atrybut CSS </a>.</p><p>Społeczeństwo historyczne poprosiło nas o usunięcie obramowania wokół filmu YouTube z ich witryny. Oto kod, którego użylibyśmy do usunięcia obramowania:</p> <p>Nasz kod zwraca:</p> <Klasa twarz = "WP OBRAZU blok"> <img src = "https://lh5.googleusercontent.com/GqIGiI370xPK2xxk-C_lCtJfww6i5MJY_NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF" alt = "C GqIGiI370xPK2xxk LCtJfww6i5MJY NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF"> </postać> <p> naszych wideo nie ma już obramowania.</p><h2>Docelowy link HTML iframe</h2><p>Dodatkowo możesz użyć tagów <em><iframe></em> jako ramki docelowej dla linku . Możemy zdefiniować iframe jako ramkę docelową dla łącza za pomocą atrybutu target w łączu HTML. Atrybut docelowy HTML musi odnosić się do atrybutu nazwy <em><iframe></em>.</p><p>Załóżmy, że społeczeństwo historyczne ma inny film, który chce, abyśmy pokazali na swojej stronie internetowej w artykule I Konstytucja Stanów Zjednoczonych. Ten film wideo został również opublikowany przez Khan Academy.</p> </a> </div> <p>Kiedy klikniesz tekst <em>Narodziny</em> na stronie internetowej, film <em>Narodziny Konstytucji Stanów Zjednoczonych - United</em> musi pojawić się w ramce iframe. Po kliknięciu tekstu <em>Artykuł I</em> powinien zostać wyrenderowany film wideo dotyczący artykułu I Konstytucji.</p><p>Możemy użyć następujący kod, aby to zrobić:</p> <p>Zwraca nasz kod:</p><figure class = "wp -block-image"> <img src = "https: //lh4.googleusercontent.com/RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjj sS4aQYQF7vZDr3_LXitgw2l3uX8Lq6Y2RcT xyYH5BxOkW4Iy OALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2-oJNxlwbz5OLQeqJr „alt =”> </ figura RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3 LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4IyOALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2 OJNxlwbz5OLQeqJr „> <p> domyślnie wideo na narodziny Konstytucji Stanów Zjednoczonych stwierdzono w iframe. zawartość ramki iframe zmienia się, aby wskazać na wideo Khan Academy dotyczące artykułu I Konstytucji. Dzieje się tak po kliknięciu adresu URL <em>artykułu I</em>.</p> </div> <p>Nasze iframe jest przekierowywane do filmu wideo na temat narodzin Konstytucji, jeśli ten film nie jest już obecny, gdy klikniemy <em>Narodziny</em>.</p><h2>Wniosek</h2><p>Tag HTML <em><iframe></em> osadza zewnętrzne zasoby internetowe, takie jak strony internetowe, na innej stronie internetowej. Jest to przydatne, jeśli chcesz dodać mapy, pliki, filmy lub inne strony internetowe do swojej witryny.</p><p>Ten samouczek wyjaśniono, odnosząc się do przykładów, jak używać HTML <em><iframe></em > do wyświetlania zewnętrznych zasobów internetowych na stronie internetowej.Teraz masz wiedzę, aby zacząć używać tagu <em><iframe></em> jak profesjonalista!</p><p>Aby dowiedzieć się więcej o kodowaniu HTML, przeczytaj nasz <a href="/learn-html / "> </a> <a href="/learn-html/?> Przewodnik po języku znaczników hipertekstowych </a>.</p>