HTML iframe元素的用法（附带实例）

HTML5 标准之前，通过框架（frame）可以在一个页面中嵌入其他页面的内容，例如在页面中单击目录可以载入相应的文章页面。

随着技术的发展和创新，使用框架的情况也越来越少，其功能也可以使用 JavaScript 和 Ajax 技术更加灵活地实现。HTML5 标准中，更是删除了大量与框架相关的元素，只留下了 iframe 元素。

iframe 元素的功能也很简单，就是在页面中嵌入另一个页面。

实际应用中，iframe 最大的作用可能就是广告的嵌入。如下面的代码（/demo/ad.html）创建了一个模拟广告页面：

<!doctype html>
<html>
<head>
     <meta charset="utf-8" />
     <title></title>
</head>
<body>
     <h1>一个小广告</h1>
</body>
</html>

下面的代码在页面中使用 iframe 元素来显示 ad.html 页面内容：

<!doctype html>
<html>
<head>
     <meta charset="utf-8" />
     <title></title>
     <style>
          body {
              margin:0px;
              padding:0px;
          }
          #ad1 {
              box-sizing:border-box;
              width:100%;
              height:100px;
          }
     </style>
</head>
<body>
     <iframe id="ad1" src="/demo/ad.html"></iframe>
</body>
</html>

页面显示效果见下图：

HTML iframe元素的用法（附带实例）

相关文章