iframe 是 HTML 里面的内嵌框架标签，作用是在当前网页里面嵌入另外一个独立网页，左右部分布局就是把页面拆成左右两块，左边一般放导航菜单，右边 iframe 用来加载点击菜单对应的内容页面，这是早期后台管理系统非常经典的写法，核心原理就是外层页面用 CSS 或者 table 把页面分成左右两栏，左侧写导航链接，链接设置 target 属性，指向右侧 iframe 的 name 名称，点击链接之后，目标页面就在右侧 iframe 里面打开，不会刷新整个父页面，需要注意现代前端已经很少推荐 iframe，存在跨域、SEO、移动端适配、浏览器安全策略限制等问题，但是老后台系统、OA 系统仍然大量使用这套左右 iframe 结构。

基础核心知识点

1 iframe 标签基础写法

• src：右侧要加载的网页地址
• name：iframe 的名称，这个非常关键，左侧 a 标签 target 就是匹配这个 name
• width height：设置宽度高度

2 a 标签 target 属性

target 的值必须和 iframe 的 name 完全一致，点击链接就会在这个 iframe 里面加载页面

完整左右布局代码示例

左右iframe布局

常用属性说明

进阶要点

1 跨域限制

父页面和 iframe 里面的子页面如果域名不同，属于跨域，JS 不能互相读取和操作里面 DOM，会报跨域错误，OA 系统一般同域名，所以可以正常使用

2 高度自适应

默认 iframe 高度固定，如果子页面内容高度变化，需要写 JS 代码，在子页面加载完成之后，动态修改 iframe 高度，实现右侧内容自动撑高

3 父页面和子页面 JS 互相调用

父页面调用 iframe 里面 JS：window.mainFrame. 函数名 ()

iframe 子页面调用父页面 JS：parent. 函数名 ()

常见问题

问题 1 iframe 框架使用方法左右部分，点击左侧链接还是整个页面跳转怎么办

回答 1 iframe 框架使用方法左右部分，一般是 a 标签没有写 target，或者 target 的值和 iframe 的 name 名称大小写不一致，检查 name 和 target 保持完全相同。

问题 2 iframe 框架使用方法左右部分，右侧 iframe 出现边框怎么去掉

回答 2 iframe 框架使用方法左右部分，给 iframe 添加 frameborder="0"，CSS 里面也可以设置 border:none，就可以消除默认边框。

问题 3 iframe 框架使用方法左右部分，跨域之后 JS 无法操作 iframe 内容是什么原因

回答 3 iframe 框架使用方法左右部分，这是浏览器同源策略限制，跨域页面不允许父页面读取 iframe 内部 DOM，同域名同端口协议才可以互相调用。

问题 4 iframe 框架使用方法左右部分，现在还推荐用 iframe 做左右后台吗

回答 4 iframe 框架使用方法左右部分，新项目一般推荐 vue react 单页应用，iframe 只适合维护老 OA 老后台系统，iframe 有 SEO 差、历史记录异常、移动端适配麻烦等缺点。

免责申明

本文为前端 HTML 基础教学示例，代码仅作学习演示，实际项目部署需要考虑浏览器安全策略、跨域、兼容等问题，生产环境请结合项目规范测试，相关开发风险由使用者自行承担。