您當前的位置:首頁 > 建站常識 > HTML整合

                                                                          HTML iframe 和 frameset 的區別

                                                                          2017-02-20

                                                                            iframe 和 frameset 都用于html頁面的框架布局。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          目錄:

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          1. <iframe> 標簽:iframe 是個內聯框架,是在頁面里生成個內部框架。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          2. <frameset> 標簽:frameset 定義一個框架集,包含多個子框架,每個框架都有獨立的文檔。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          1. <iframe> 標簽

                                                                          iframe 是個內聯框架,是在頁面里生成個內部框架。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          1.1 格式

                                                                          <iframe></iframe>JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          1.2 屬性

                                                                          frameborder {int}:是否顯示框架的邊框;JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          src {URL}:指定一個資源(如網頁、圖片)的uri;JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          scrolling {boolean}:是否顯示框架的滾動條;JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          width {int}:定義iframe的寬度;JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          height {int}:定義iframe的高度;JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          1.3 示例

                                                                          <body>
                                                                          <h3>HTML標簽演示</h3>
                                                                          <iframe src=1.1-ShowHtml.htm ></iframe>
                                                                          </body>

                                                                          JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          1.4 注意事項

                                                                          在 "<iframe>我是內容</iframe>" 內添加內容時,在展示頁面不會顯示添加的內容。所以還是使用src屬性指定一個頁面吧。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          1.5 應用場景

                                                                          1) 版本升級頁面,版本日志過多,可以把升級的信息放到一個iframe里。JNL七七世界-網站建設|UI設計|人資系統|二次開發
                                                                          2) 富文本編輯框,如博客園的【新建隨筆】區域。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          2. <frameset> 標簽

                                                                          frameset 定義一個框架集,包含多個框架,每個框架都有獨立的文檔。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          2.1 格式

                                                                          <frameset >JNL七七世界-網站建設|UI設計|人資系統|二次開發
                                                                          <frame src=a.htm />JNL七七世界-網站建設|UI設計|人資系統|二次開發
                                                                          <frame src=b.htm />JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                            <noframes></noframes>JNL七七世界-網站建設|UI設計|人資系統|二次開發
                                                                          </frameset>JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          2.2 子項說明

                                                                          <frame src=a.htm /> :子框架JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          <noframes></noframes>:瀏覽器不支持此框架的時,顯示的內容。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          2.3 屬性

                                                                          frameset 屬性:

                                                                            rows :表示子框架按行的樣式布局()。以2個子框架為例:rows="30%,*" ,表示第一個框架占整個頁面30%的高度,第二個占剩下的;JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                            cols :表示子框架按列的樣式布局()。以2個子框架為例:cols="30%,*" ,表示第一個框架占整個頁面30%的長度,第二個占剩下的;JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                            noresize="noresize" :表示不調整子框架的范圍。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          frame 屬性:

                                                                            src :指向一個資源(如頁面、圖片等)的URI;JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                            name :指定框架的名稱,以便進行框架間的操作。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          2.4 示例

                                                                          <html xmlns="http://www.w3.org/1999/xhtml">
                                                                          <head>
                                                                              <title>frameset 演示</title>
                                                                          </head>
                                                                          <frameset rows="30%,*"  noresize="noresize">
                                                                              <frame src=DateGrid.htm name="frm1"  />
                                                                              <frame src=Dialog.htm  name="frm2"/>
                                                                              <noframes></noframes>
                                                                          </frameset>
                                                                          </html>

                                                                          JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          2.5 注意事項

                                                                          使用frameset標簽時,注意要去掉外層的<body></body>標簽。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          2.6 子框架間的操作

                                                                          參照示例代碼,frm1更改frm2的子集指向的頁面:window.parent.frames["frm2"].location.href = 'b.htm'JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          2.7 應用場景

                                                                          1) 后臺頁面的管理,左邊顯示 菜單,右邊框架 顯示詳細頁面。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          2) 功能菜單頁面,如bbs.csdn.netJNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          3. 小知識

                                                                            瀏覽頁面中的框架時,在框架頁面內 點擊右鍵,會多出框架的信息。JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          以chrome為例:JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                            JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                           JNL七七世界-網站建設|UI設計|人資系統|二次開發

                                                                          一切精彩源自七七網絡!我們傾力打造時尚潮流第一線!

                                                                          ? 2012-2024七七建設     20707.net 版權所有     豫ICP備2022027209號

                                                                          欧美一级AA大片免费在线观看