用IFRAME實現網頁的內嵌和預載

來源:互聯網
上載者:User
在HTM(HTML)檔案中是否可以像PHP、ASP檔案一樣嵌入其他檔案呢?下面筆者介紹用iframe來實現的方法。

  iframe元素的功能是在一個文檔裡內嵌一個文檔,建立一個浮動的幀。其部分屬性簡介如下:

name:內嵌幀名稱

width:內嵌幀寬度(可用像素值或百分比)

height:內嵌幀高度(可用像素值或百分比)

frameborder:內嵌幀邊框

marginwidth:幀內文本的左右頁面邊界

marginheight:幀內文本的上下頁面邊界

scrolling:是否出現捲軸(“auto”為自動,“yes”為顯示,“no”為不顯示)

src:內嵌入檔案的地址

style:內嵌文檔的樣式(如設定文檔背景等)

allowtransparency:是否允許透明
 
  明白了以上屬性後,我們可用以下代碼實現,在main.htm 中把samper.htm檔案的內容顯示在一個高度為80、寬度為100%、自動顯示邊框的內嵌幀中:

〈iframe name="import_frame" width=100%

height=80 src="samper.htm" frameborder=auto〉

〈/iframe〉


  不錯吧,馬上“Ctrl+C”、“Ctrl+V”試試。

  有時我們為強調頁面的某項內容,想讓它先於頁面的其他內容顯示。同樣用iframe即可輕鬆實現:

  先把要強調顯示的內容另存新檔一個檔案,如first.htm ,然後通過一個預載頁index.htm,內容如下:

〈meta http-equiv="refresh" content="3,url=index2.htm"〉

〈body〉

  頁面載入中,請稍候……〈iframe src="first.htm" style="display:none"〉〈/iframe〉

〈/body〉

  主檔案index2.htm

〈body〉

〈iframe src="first.htm" 加入其他屬性限制〉〈/iframe〉

〈/body〉

  first.htm的內容就會先於頁面的其他內容出現在您的瀏覽器裡了,是不是很簡單?再“Ctrl+C”、“Ctrl+V”一次?


<

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.