object标签无法独立弹窗，必须嵌入window.open()创建的无chrome窗口中，并通过CSS清除边框；调用需用户点击触发、URL用about:blank、features禁用所有chrome项。
object 标签本身不负责“弹窗”，它只是嵌入外部资源的容器。想用它实现“无边框弹窗”，本质是把它塞进一个真正弹出的上下文里——比如 window.open() 打开的独立窗口，再配合 CSS 去掉默认边框和装饰。
为什么不能直接用 object 自己弹窗？
object 是内联嵌入元素，没有窗口级行为。它不会新开窗口、不接管焦点、也不隔离样式作用域。你把它写在页面里，它就老老实实待在当前文档流中，顶多是个“可替换内容块”。所谓“无边框”，其实是目标窗口本身的 chrome 被关掉了，不是 object 干的。
window.open() 中嵌入 object 的关键配置
必须满足三个条件，否则浏览器会拦截或显示为普通标签页：
- 调用必须由用户点击直接触发（比如
<button onclick="openPopup()">），不能在setTimeout或fetch.then里调用 - URL 必须指定为
'about:blank'或一个真实可访问路径，空字符串会被拒 - features 字符串里要显式关闭所有 chrome：去掉
toolbar、location、status、menubar、titlebar，只留width、height、scrollbars、resizable
示例：const win = window.open('about:blank', '_blank', 'width=800,height=600,toolbar=no,location=no,status=no,menubar=no,titlebar=no,scrollbars=yes,resizable=yes');
立即学习“前端免费学习笔记（深入）”；
在新开窗口里用 object 加载内容并去边框
新开窗口拿到后，立刻往它的 document 写入 HTML，并确保 object 元素自身没有 border、outline，且父容器设 margin: 0; padding: 0;：
win.document.write(`
<!DOCTYPE html>
<html>
<head><title>Embedded</title></head>
<body style="margin:0;padding:0;overflow:hidden;">
<object data="report.pdf" type="application/pdf"
style="width:100vw;height:100vh;border:none;outline:none;">
<p>PDF not supported.</p>
</object>
</body>
</html>
`);
注意点：
-
object的style必须含border:none和outline:none，否则某些 PDF 插件或旧版浏览器会渲染灰色边框 - 不要依赖
object的width/height属性（HTML 属性已废弃），一律用 CSS 控制尺寸 - 如果加载的是 SVG 或 HTML，确保源文件自身没设
bodymargin/padding，否则会透出白边
容易被忽略的兼容性坑
现代 Chrome/Firefox 对 window.open() 的限制越来越严，尤其在跨域或 iframe 沙箱环境下：
- 如果主页面启用了
sandbox属性（如<iframe sandbox="allow-scripts">），必须额外加allow-popups才能调用window.open() - Safari 对
about:blank窗口写入内容有延迟，建议写完后调用win.document.close()显式结束写入 - 移动端 Safari 完全禁用
window.open()弹窗，点开只会跳转到新标签页，且无法控制尺寸——这时候别硬上，改用dialog或 popover
真正“无边框”的控制权在窗口层，object 只管内容加载；把 window 特性配错，后面怎么写 CSS 都白搭。
