HTML iframe

2021-03-26 11:57 更新

HTML iframe

iframe 元素在現(xiàn)有元素中嵌入另一個HTML文檔。

它有局部屬性: src，srcdoc，name，width，height，sandbox，seamless 。

HTML5中的 sandbox 和seamless屬性是新增的。

longdesc，align，allowtransparency，frameborder，marginheight，marginwidth 和scrolling屬性已過時。

以下代碼顯示如何使用iframe元素。

<!DOCTYPE HTML>
<html>
<body>
  <a href="http://www.o2fo.com" target="myframe">Tutorial</a>
  <iframe name="myframe" width="300" height="300"> </iframe>
</body>
</html>

注意

將創(chuàng)建名稱屬性值為 myframe 的 iframe 。這將創(chuàng)建一個名為 myframe 的瀏覽上下文。

然后，這個瀏覽上下文在其他元素的目標(biāo)屬性中使用 - 特別是a，form，button，input和base。

a 元素來創(chuàng)建一對超鏈接，這些超鏈接會將其href屬性中指定的網(wǎng)址加載到iframe中。

width和height屬性指定大小(以像素為單位)。src屬性指定應(yīng)最初加載并顯示在iframe中的網(wǎng)址。

srcdoc屬性允許您定義一個內(nèi)嵌顯示的HTML文檔。

seamless屬性設(shè)置瀏覽器顯示iframe，如同它們是主HTML文檔的組成部分。

否則，默認(rèn)情況下會應(yīng)用邊框，如果內(nèi)容大于width和height屬性，則會出現(xiàn)滾動條。


iframe sandbox

sandbox 屬性對HTML文檔應(yīng)用限制。當(dāng)應(yīng)用沒有值的屬性時，如下所示：

...
<iframe sandbox  name="myframe" width="300" height="100">
</iframe>
...

以下是禁用:

  • scripts
  • forms
  • plugins
  • 定位其他瀏覽上下文的鏈接

您可以通過為sandbox屬性定義值來啟用各個功能，如下所示：

...
<iframe sandbox="allow-forms" name="myframe" width="300" height="100">
</iframe>
...

可以使用的值的集合在下面的列表中描述。

  • allow-forms - 啟用表單
  • allow-scripts - 啟用腳本
  • allow-top-navigation - 允許定位到頂級瀏覽上下文的鏈接，這樣可以將整個文檔替換為另一個文檔，也可以創(chuàng)建新的標(biāo)簽頁或窗口
  • allow-same-origin - 允許將iframe中的內(nèi)容視為來自與文檔其余部分相同的位置
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號