HTML课程之iframe
HTML课程之iframe

一、iframe核心知识

1. 认识iframe：网页中的“内嵌窗口”

iframe（Inline Frame，内联框架）是HTML的核心标签，作用是在当前网页中嵌入另一个独立网页，形成“页中页”效果，无需跳转链接就能使用外部网页功能。

比如在课件里嵌入百度搜索页，可直接在课件内完成搜索，不用打开新浏览器标签。

<iframe src="https://www.baidu.com"></iframe>

2. 必学属性：控制iframe的“关键开关”

属性决定iframe的尺寸、内容来源和交互权限，以下5个是开发中最常用的属性，必须掌握：

  • src：必填属性，指定“要嵌入的网页URL”，如src="https://www.baidu.com"（百度首页）。
  • width/height：控制宽高，值可写像素（px，如400px）或百分比（%，如100%，占满父容器）。
  • frameborder：控制边框显示，值为0（隐藏边框，推荐）或1（显示边框），现代浏览器默认隐藏。
  • allowfullscreen：无值属性，仅写属性名即可，允许嵌入内容全屏（如百度地图全屏查看）。
  • title：添加描述（如title="百度搜索页"），提升无障碍访问，帮助屏幕阅读器识别内容。
<iframe
  src="https://www.baidu.com"   width="100%"   height="400px"   frameborder="0"   title="百度搜索页面" ></iframe>

3. 避坑指南：确保百度能正常嵌入

百度支持iframe嵌入，但需注意2个细节，避免显示异常：

  • URL正确性：必须写完整的“https://www.baidu.com”，缺少“https://”会导致嵌入失败。
  • 浏览器缓存：若嵌入后空白，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新，清除缓存。
  • 其他限制：部分浏览器隐私模式下可能限制iframe，建议用普通模式打开课件。

4. 进阶技巧：点击链接切换百度内容

给iframe设置name属性，让a标签的target属性等于iframe的name，可实现“点击链接，在iframe内打开百度相关页面”，无需跳转。

<!-- 1. 定义iframe并设置name -->
<iframe name="baiduFrame" width="100%" height="400px"></iframe>

<!-- 2. a标签target指向iframe的name，链接为百度相关页面 -->
<a href="https://www.baidu.com" target="baiduFrame">打开百度首页</a>
<a href="https://image.baidu.com" target="baiduFrame">切换到百度图片</a>

二、实战：嵌入百度搜索页

结合上面的知识，我们来实战嵌入百度首页，可直接在下方框内使用百度搜索功能：

百度首页嵌入演示

配置说明：width=100%（占满容器）、height=400px（固定高度）、frameborder=0（隐藏边框），支持直接在框内输入关键词搜索。
<iframe
  src="https://www.baidu.com"
  width="100%"
  height="400px"
  frameborder="0"
  title="百度搜索页面"
></iframe>
DKFile
技术支持 IDO老徐
问题反馈