🪟 iFrame 生成器

关于 iFrame 生成器

这个 iFrame 生成器完全在你的浏览器中运行。填写源 URL、尺寸以及可选属性（title、loading、allow、sandbox、class、id、style），工具会生成可直接粘贴的 <iframe> 标签，并显示实时预览。整个过程不会上传任何数据——生成通过 JavaScript 在你的设备上瞬时完成。

常见属性

• src —— 要嵌入的页面 URL。iframe 要显示内容必须填写。
• width 和 height —— iframe 的尺寸。可接受像素值（如 560）或百分比（如 100%）。
• title —— 描述 iframe 内容的无障碍标签。对屏幕阅读器用户很重要。
• loading —— lazy 延迟到用户滚动到附近时才加载 iframe。eager 立即加载。
• allow —— 嵌入页面可使用的功能策略列表，如 fullscreen、geolocation、camera。
• sandbox —— 出于安全考虑限制嵌入页面的能力。可按需组合 allow-scripts、allow-same-origin 等令牌。
• frameborder —— 边框的传统属性。现代站点应改用 style="border:0;"。
• class、id、style —— 用于样式和标识的标准 HTML 属性。

如何使用生成器

1. 输入 源 URL——这是唯一必填的字段。
2. 设置 宽度 和 高度。响应式嵌入可使用百分比。
3. 添加 标题 以提升无障碍体验（推荐）。
4. 如果 iframe 在视口下方，可选择 loading="lazy" 提升页面加载性能。
5. 使用 allow 授予特定权限（例如视频播放器的 fullscreen）。
6. 点击 复制，将生成的 HTML 粘贴到你的页面中。

常见问题

这个工具会上传我的数据吗？ 不会。所有操作都在本地浏览器中完成，输入永远不会离开设备。

为什么我的 iframe 加载不出来？ 许多网站（Google、Facebook、X/Twitter 等）会发送 X-Frame-Options 或 Content-Security-Policy 头来禁止被嵌入。这是服务器端的选择——iframe 标签本身没错，但目标页面拒绝渲染。

allow 和 sandbox 有什么区别？ allow 向嵌入页面授予额外权限（如全屏或摄像头）。sandbox 限制嵌入页面的能力（如运行脚本或提交表单）。两者是互补关系。

应该总是使用 sandbox 吗？ 对于不受信任的内容，是的——应用最严格的、但仍能让内容正常工作的 sandbox。对于受信任的第一方内容，sandbox 通常是不必要的。