Javascript 設置 iframe 源

Michael Zippo

iframe HTML 標記將 Web 文檔嵌入到網頁中。嵌入文檔可以是 PDF、網頁或其他一些資源。 src 屬性定義了板載資源的位置。

您可以嵌入網絡文檔的內容，例如 PDF 或來自 Google 地圖的地圖，在另一個頁面上，使用 HTML。

這就是 HTML </em> 的用武之地。HTML <em>< iframe></em> 標籤用於像其他網頁一樣將外部對象嵌入到單個網頁中。本教程將通過示例解釋如何使用 HTML <em><iframe></em> 標籤將 Web 資源嵌入到網頁中。</p><h2>HTML iframe</h2><p>HTML iframe 或嵌入式框架在頁面上顯示外部 Web 文檔。您可以使用 HTML <iframe> 標籤嵌入地圖、PDF、視頻或其他資源。</p><p>存儲在內嵌框架中的代碼獨立於網頁的其餘部分。應用於您的網頁的樣式或 JavaScript 不會應用於 iframe。</p><p>以下是 HTML <em><iframe></em> 標記的語法：</p> <p><em><iframe ></em> 標籤用於創建 iframe。我們已經指定了一個 iframe <em>src</em> 屬性。該屬性包含我們想要嵌入到網頁中的 HTML 元素的位置。它應該是一個<a href="/url-vs-uri/"> HTML URL </a>。</p><h2>Example HTML iframe</h2><p>我們舉個例子來探討一下<em><iframe></em> 標籤有效。</p> </div> <p>我們的代碼返回：</p> </a> </div> <圖類=“WP-圖像塊”> <IMG SRC =“https://lh5.googleusercontent.com/B7_aNtKMRo5xi-n1RJKv6PbF3jGnedSEMOiboyASj-IdPDUErLGbwsrJ3AvdFby6ubXoc VAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf”ALT =“B7 ANtKMRo5xi N1RJKv6PbF3jGnedSEMOiboyASj IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf”> </圖> <p>用於<em><iframe></em> 將外部網絡資源嵌入到我們的網頁中。我們構建的網絡資源是鏈接“<a href="https://www.youtube.com/embed/Rk8dCnKIfP4" target="_blank" rel="noopener"> https://www.youtube.com/嵌入/Rk8dCnKIfP4 </a>”。這表示歷史學會希望在其網站上展示的視頻。</p><h4> HTML iframe 的高度和寬度</h4> <p>height 和 width 屬性用於定義 iframe 的大小.假設華盛頓特區當地的歷史學會希望我們放大他們網站上的視頻。</p><p>我們將 YouTube 視頻的寬度設置為 500 像素，高度設置為 300 像素：</p><p>p> <p>我們的代碼返回：</p><figure class="wp-image-block"> <img class="lazyload" data-src="https: / / lh4.googleusercontent.com/YBnpQe9nKF00pYzt6ESAsx-siD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp-OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ“ALT =”YBnpQe9nKF00pYzt6ESAsx SiD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ“> </圖> <p>我們的嵌入式視頻現在500像素寬和300像素高對我們的HTML文檔。這使人們更容易在</圖> <p>網站上查看我們的網站</p>。</p>> 或者，我們可以定義 <a href="/css-height-and-width/ "> 使用 CSS </a> 的 iframe 標籤的寬度和高度。但是，由於 HTML 支持 height 和 weight 屬性，這不是必需的。</p><h2>從 HTML iframe 中刪除邊框</h2><p>使用 <em><iframe></em> 時，您請注意，它的內容被邊框包圍。如果你想去掉這個邊框，你可以使用 <a href="/css-borders/"> <em>border: none ;</em> </a> <a href="/css-borders/"> CSS 屬性 </a>。</p><p>歷史學會要求我們從他們的網站上移除 YouTube 視頻周圍的邊框。這是我們用來移除邊框的代碼：</p> <p>我們的代碼返回：</p> <類面=“WP-圖像塊”> <IMG SRC =“https://lh5.googleusercontent.com/GqIGiI370xPK2xxk-C_lCtJfww6i5MJY_NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF”ALT =“C GqIGiI370xPK2xxk LCtJfww6i5MJY NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF”> </圖> <p>現在我們video 它不再有邊框。</p><h2>HTML iframe 鏈接的目標</h2><p>此外，您可以使用 <em><iframe></em> 標籤作為鏈接的目標框架.我們可以使用 HTML 鏈接中的 target 屬性將 iframe 定義為鏈接的目標框架。目標 HTML 屬性必須引用 <em><iframe></em> 的名稱屬性。</p><p>假設歷史學會有另一個視頻，他們希望我們在他們的網站上顯示第 I 條美國憲法。該視頻也由可汗學院發布。</p> </a> </div> <p>當你點擊網頁上的文字<em>Birth</em>時，視頻<em>Birth of the States of the States - United</em> 必須出現在 iframe 中。當點擊文本 <em>Article I</em> 時，應該會呈現有關憲法第一條的視頻。</p><p>我們可以使用以下代碼執行此操作：</p> <p>我們的代碼返回：</p><figure class = "wp -block-image"> <img src = "https://lh4.googleusercontent.com/RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjj sS4aQYQF7vZDr3_LXitgw2l3uX8Lq6Y2RcT xyYH5BxOkW4Iy OALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2-oJNxlwbz5OLQeqJr“ALT =”> </數字RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3 LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4IyOALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2 OJNxlwbz5OLQeqJr“> <P>通過默認，在美國憲法誕生的視頻在iframe中說明。 iframe 的內容更改為指向可汗學院關於憲法第一條的視頻。當您點擊 <em>Article I</em> URL 時會發生這種情況。</p> </div> <p>如果當我們點擊<em>Birth</em>時該視頻尚未出現，我們的 iframe 將被重定向到憲法誕生的視頻。</p><h2>結論</h2><p>HTML <em><iframe></em> 標籤將網頁等外部網絡資源嵌入到另一個網頁中。如果您想將地圖、文件、視頻或其他網頁添加到您的站點，這將非常有用。</p><p>本教程通過示例說明瞭如何使用 HTML <em><iframe></em > 在網頁上顯示外部網絡資源。您現在已經掌握了像專業人士一樣開始使用 <em><iframe></em> 標籤的知識！</p><p>要了解有關 HTML 編碼的更多信息，請閱讀我們的<a href="/learn-html/"></a> <a href="/learn-html/?>學習指南超文本標記語言</a>。</p>