在HTML頁面中嵌入其他頁面的方法-零基礎自學網頁制作

HTML頁面中嵌入其他頁面的方法

在自己的頁面中嵌入其他頁面是一個非常重要的操作，既能豐富自己的頁面樣式又能增強頁面的信息量。

舉個例子，如果打算在自己的頁面中插入一個視頻網站的視頻該怎么做呢？

假如我現在自己的頁面中嵌入這個視頻，

我只需要在視頻下側找到"分享"。

點擊之后出現這樣的對話框，如圖：

通過在我們的頁面中粘貼這段通用代碼就可以顯示這個視頻了。

代碼如下：

<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>

下面就寫到我們的頁面中試試吧。

首先復制"第一個網頁.html"文件，改名為"在頁面中嵌入頁面.html"保存，然后用記事本打開，修改<head></head>標簽中的<title>第一個頁面</title>編輯為"在頁面中嵌入頁面"即可，完整代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁面中嵌入頁面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>
  </body>
  </html>

頁面效果如下：

怎么樣，是不是很神奇！

下面我們來分析一下這段代碼的含義。

首先要引入一個新標簽<iframe>，HTML的使用手冊中翻譯為"框架"，說實話，這么翻譯初學者是不知所云的。這個框架元素的主要作用就是在自己的頁面中嵌入其他頁面。

在<iframe>標簽中先指定路徑屬性即src。這里使用的是單引號，實際上只要是半角符號，單引號和雙引號都可以的。

然后設置長寬屬性，即width和height，大家可以嘗試改變數據看看。

frameborder可以為iframe的窗口指定一個邊框，大家可以嘗試把0改成1看看。大家注意哈，這里輸入30和輸入1是一樣的，因為這個屬性不是定義邊框的寬度，而是定義是否顯示邊框！在編程中叫做布爾值，0代表沒有邊框，1代表有邊框！和我們點燈的開關一樣！

如圖：多了個邊框出來。

最后'allowfullscreen'這個描述非常的奇葩，把它刪掉沒有任何影響。不曉得是干什么的，主要是也不符合html的語法（也可能是我沒見識）。如果有詳細了解的小伙伴歡迎留言指教，感激不盡。

下面我們嘗試修改一下src屬性，給它一個別的路徑看看。例如:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁面中嵌入頁面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'>
  </iframe>
  </body>
  </html>

需要注意的是，修改了src并保存文件之后要把原頁面關閉然后重新打開才可以正常顯示！

效果如下：

在瀏覽網頁時我們還經常遇到這樣的情況，就是有一個獨立窗口顯示嵌套的頁面，上面有個標題，一點擊就會跳到那個嵌入的頁面上，這個其實很簡答，使用一個<a></a>元素即可辦到，示例代碼如下:

<a href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內聯元素——零基礎自學網頁制作</a>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'></iframe>

頁面示例如下：

框架元素并沒有換行，所有我們可以推測出<iframe>標簽實際上是個內聯元素，如何讓它換行呢？

為<iframe>的style屬性中寫入display:block即可。這句代碼的意思是按照塊元素來顯示<iframe>內容。

示例代碼如下：

<iframe height=498 width=510 style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>

頁面效果如下：

是不是很有意思。

下面我們來介紹一個更有趣的玩法。如圖所示：

這個怎么做呢？

這就要介紹<iframe>標簽中的另一個屬性：name（名字）

示例代碼如下：name="iframe"

<iframe name = "iframe" height=498 width=510style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>

這里講個題外話，如果大家了解中國古代的"請神術"的話就會知道這樣一個有趣的傳說，就是如果我們能叫出鬼神的名字就可以驅使它。

編程也是這樣，我們給函數或變量一個名字后，就可以隨時隨地的驅使它。

現在我們給<iframe>起了個名字叫做"iframe"，當然您可以使用其他名字也沒問題，但要使用英文或漢語拼音命名，名字是英語字母組合最好。

有了名字之后，<a>標簽就要驅使<iframe>標簽來顯示自己路徑下的內容，如何驅使呢？

大家還記得<a>標簽中有一個target屬性嗎？只要讓target="iframename"即可！

也就是target="iframe"。示例代碼如下：大家要注意的是<a>標簽也是內聯元素，也需要添加display:block，不然也是排在一列顯示。

<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內聯元素——零基礎自學網頁制作</a><!--第一個a鏈接的是頭條文章-->
<a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"> 殲20戰斗機百科</a><!--第二個a鏈接的是百度百科-->
<a style = "display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三個a鏈接的是本地圖片-->
<iframe name = "iframe" height=498 width=510style = "display:block;"></iframe>

只要我們為不同的<a>標簽賦予target="iframe"的屬性，點擊這些<a>標簽就可以在叫做"iframe"的框架元素中顯示自己的頁面。這時我們可以把<iframe>標簽中的src屬性刪除掉，保存文件后，關閉測試網頁，再重新打開，效果如下:

初始狀態下，因為框架元素中的src是空的，所以打開后是空白的。如果您覺得單調可以任意復制3個<a>中的一個href中的鏈接路徑給<iframe>的src屬性，打開就是相應的標簽。這個就不演示了，大家自己試試即可。

點擊第一個鏈接效果如下：

點擊第二個鏈接如下：

點擊第三個鏈接如下：

最后再強調一下，改完框架的src屬性后需要關閉頁面后重新打開才可以，刷新的話并不能正確顯示！切記！

今天的示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁面中嵌入頁面</title>
  </head> 
  <body>
  <a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內聯元素——零基礎自學網頁制作</a>
  <a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">殲20戰斗機百科</a>
<a style = "display:block;" target="iframe" href="image1.jpg">IT美女</a>
<iframe name = "iframe" height=498 width=510 style = "display:block;"></iframe>
</body>
</html>

今天的內容結束了，明天我將會為大家介紹<object>和<embed>這兩個標簽，它們可以在頁面中嵌入更多有趣的東西。

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

了執行Javascript，需要在HTML文件內以特定的方式書寫JavaScript的代碼，JavaScript的書寫方法有多種，其執行的流程也各不相同：

1 <script>標簽嵌入

此種嵌入方法無法操作<script>之后的DOM元素。因為<script>之后的DOM元素還未構造，因此在<script>標簽內就無法取得位于其后的DOM元素。

2 讀取外部JavaScript文件

此種嵌入方法可以指定defer、async屬性。defer可以推遲執行，async可以異步執行。

3 onload嵌入

此種嵌入方法在頁面讀取完后再對其執行，所以可以對所有的DOM元素操作。

<body onload="alert('hello')">
window.onload = function(){alert('hello');};

當window.onload事件觸發時，頁面上所有的DOM、樣式表、腳本、圖片、flash都已經加載完成了。

//window.onload不能同時編寫多個。
//以下代碼無法正確執行，結果只輸出第二個。
window.onload = function(){
  alert("test1");
};

window.onload = function(){
  alert("test2");
};

//$(document).ready()能同時編寫多個
//結果兩次都輸出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

window.onload和body中onload也有些許區別：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，結果為：

"DOMContentLoaded"
"bodyonload"

說明body中的onload會覆蓋window.onload

在chrome下，結果為：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代碼移到最下面，結果又會是什么樣呢？

chrome和IE10、FireFox的結果竟然是一樣的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 誰在下面就是誰覆蓋誰，只會執行后面的那個。

4 DOM ContentLoaded嵌入

onload方法可能需要等待時間，而本方法可以在完成HTML解析后發生的事件，減少等待時間。

在chrome、IE10和FireFox中，執行結果是：DOMContentLoaded然后才是onload的輸出。所以說一般情況下，DOMContentLoaded事件要在window.onload之前執行，當DOM樹構建完成的時候就會執行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是個jQuery使用者，你可能會經常使用$(document).ready();或者$(function(){})，這都是使用了DOMContentLoaded事件

5 動態載入JavaScript文件

5.1 使用原生js方法

動態創建script標簽，并指定script的src屬性

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (typeof(callback) != "undefined") {
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            }
        } else {
            script.onload = function() {
                callback();
            }
        }
    }
    script.src = url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

還可以使用同樣的原理動態加載css文件，只不過插入的的父節點是head標簽。

5.2 使用document.write/writeln(）方式

該種方式可以實現js文件的動態加載，原理就是在重寫文檔流，這種方式會導致整個頁面重繪。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的轉義。

5.3 使用jQuery

使用getScript(url,callback)方法實現動態加載js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－

4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入外部 CSS 文件。下面我們就來看看這些方式和它們的優缺點。

內聯方式

內聯方式指的是直接在 HTML 標簽中的 style 屬性中添加 CSS。

示例：

<div style="background: red"></div>

這通常是個很糟糕的書寫方式，它只能改變當前標簽的樣式，如果想要多個 <div> 擁有相同的樣式，你不得不重復地為每個 <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內聯方式引入 CSS 代碼會導致 HTML 代碼變得冗長，且使得網頁難以維護。

嵌入方式

嵌入方式指的是在 HTML 頭部中的 <style> 標簽下書寫 CSS 代碼。

示例：

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只對當前的網頁有效。因為 CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中，當我們寫模板網頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結構和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效，所以當多個頁面需要引入相同的 CSS 代碼時，這樣寫會導致代碼冗余，也不利于維護。

鏈接方式

鏈接方式指的是使用 HTML 頭部的 <head> 標簽引入外部的 CSS 文件。

示例：

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨的 CSS 文件中，所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會在第一次加載時引入，以后切換頁面時只需加載 HTML 文件即可。

導入方式

導入方式指的是使用 CSS 規則引入外部 CSS 文件。

示例：

<style>
 @import url(style.css);
</style>

比較鏈接方式和導入方式

鏈接方式（下面用 link 代替）和導入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，并且說明為什么不推薦使用 @import。

link 屬于 HTML，通過 <link> 標簽中的 href 屬性來引入外部文件，而 @import 屬于 CSS，所以導入語句應寫在 CSS 中，要注意的是導入語句應寫在樣式表的開頭，否則無法正確導入外部文件；
@import 是 CSS2.1 才出現的概念，所以如果瀏覽器版本較低，無法正確導入外部樣式文件；
當 HTML 文件被加載時，link 引用的文件會同時被加載，而 @import 引用的文件則會等頁面全部下載完畢再被加載；

小結：我們應盡量使用 <link> 標簽導入外部 CSS 文件，避免或者少用使用其他三種方式。

在線咨詢

上一篇：Brython - 在瀏覽器上運行Python
下一篇：純CSS修改checkbox復選框樣式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商