HTML5中仅支持iframe嵌入网页内容，需设置src、title属性，用CSS实现响应式布局，通过sandbox增强安全性，以Grid/Flexbox替代frameset，并处理加载失败与跨域问题。
如果您希望在HTML5页面中嵌入其他网页内容，需注意HTML5已废弃frameset和frame标签，仅支持iframe作为合法的框架嵌入方式。以下是使用iframe实现子页面嵌入的具体设置方法：
一、使用iframe基础语法嵌入子页面
iframe是HTML5中唯一保留的内联框架元素，用于在当前文档中嵌入另一个独立的HTML文档。它具有独立的文档上下文、样式隔离性和可交互性。
1、在HTML文件中定位到需要插入框架的位置，添加标签。
2、设置src属性为子页面的URL，例如：。
立即学习“前端免费学习笔记（深入）”；
3、为保障可访问性，必须添加title属性描述框架内容，例如：title="用户帮助文档"。
4、通过width和height属性设定初始尺寸，推荐使用CSS控制以提升响应性。
二、通过CSS控制iframe尺寸与响应式布局
直接使用width和height属性会导致固定像素值难以适配不同设备，采用CSS可实现灵活缩放与自适应。
1、为iframe添加class名称，例如：。
2、在
3、添加aspect-ratio: 16 / 9（如需保持宽高比）并配合max-height防止溢出容器。
4、对移动端优化，加入媒体查询：@media (max-width: 768px) { .responsive-iframe { height: 400px; } }。
三、设置iframe安全策略与沙箱权限
默认情况下，iframe可能继承父页面部分能力，启用sandbox属性可限制其执行脚本、提交表单等行为，增强安全性。
1、添加sandbox属性：，此时所有权限均被禁用。
2、按需启用特定权限，例如允许脚本运行和表单提交：sandbox="allow-scripts allow-forms"。
3、若需与父页面通信，必须显式添加allow-same-origin，但仅当src为同源地址时才可安全启用。
4、禁止自动播放媒体内容，添加allow="autoplay 'none'"属性以符合现代浏览器策略。
四、替代frameset的多区域布局方案
由于frameset在HTML5中完全无效，需改用CSS Grid或Flexbox模拟传统框架分区效果，并配合多个iframe实现功能分区。
1、创建一个 2、在该容器内放置两个 3、使用CSS Grid定义列宽比例： 4、为每个 当 1、为 2、在JavaScript中监听 3、若目标页面存在CSP策略阻止嵌入，浏览器控制台将报错Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'DENY'。 4、检测是否被拒绝渲染，可通过尝试访问iframe元素，分别对应导航区与主内容区。display: grid; grid-template-columns: 200px 1fr;。iframe设置border: none和margin: 0，避免默认边框与间距干扰布局。五、处理iframe加载失败与空白问题
src指向的资源不可达、跨域被拦截或MIME类型不匹配时，iframe可能显示为空白或错误提示，需主动检测并反馈。iframe绑定onerror事件：。load事件，确认加载完成后再操作DOM：iframe.addEventListener('load', () => { console.log('iframe loaded'); });。iframe.contentDocument并捕获SecurityError异常来判断。
