直接用<iframe>标签嵌入外部网页，核心是设置src指向目标地址，并通过CSS控制尺寸、添加title提升可访问性；必须有src，推荐用style设宽高，title不可省略。

直接用<iframe>标签就能嵌入外部网页，核心是设置src指向目标地址，并控制尺寸和可访问性。

基础写法：必须有src，推荐加宽高和title

src属性必不可少，否则不加载内容；宽度和高度建议用CSS控制更灵活；title不是可选装饰，而是辅助技术识别的关键信息。

• 写法示例：

  <iframe src="https://example.com" style="width:100%; height:600px;" title="示例网站内容"></iframe></li>
    <li>避免只写<code>width="100%" height="400"

  这类HTML属性，容易受父容器影响或响应失效
• 本地HTML文件路径也可用，如src="about.html"，但需在服务器环境下运行（file://协议下部分浏览器会拦截）

尺寸与布局：适配不同屏幕

固定像素值适合局部模块，百分比或视口单位更适合响应式设计；滚动和边框应统一用CSS管理。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• 全宽自适应：style="width:100%; height:500px; border:none;"
• 禁止滚动条：style="overflow:hidden;"（不要用已废弃的scrolling="no"）
• 移动端友好：配合max-width和aspect-ratio防拉伸，例如style="width:100%; max-width:800px; aspect-ratio:16/9;"

安全与性能：不能忽略的细节

嵌入第三方页面时，默认存在跨域限制，且可能带来性能或隐私风险，需主动配置防护措施。

立即学习“前端免费学习笔记（深入）”；

• 启用沙箱机制：sandbox="allow-scripts allow-same-origin"（按需开放权限，不加参数则完全隔离）
• 延迟加载非首屏内容：loading="lazy"可减少初始渲染压力
• 禁用不必要能力：referrerpolicy="no-referrer"防止泄露来源页地址
• 注意：若目标页设了X-Frame-Options: DENY或Content-Security-Policy frame-ancestors，嵌入会被浏览器直接拦截

替代方案：什么情况下不用iframe

iframe适合展示独立、隔离的内容；如果需要样式继承、DOM交互或SEO收录嵌入内容，就得换方式。

• 想复用同域HTML片段：用JavaScript fetch + innerHTML注入，主页面样式能生效
• 需要fallback提示（比如加载失败时显示文字）：改用<object data="page.html" type="text/html"><p>加载失败</p></object>
• 构建时就合并内容：借助Webpack、Vite插件或服务端模板（如PHP include），生成静态单页