最简插屏应避免 window.open() 直接调用，因其在 Chrome、Edge、Safari 中常被静默拦截；必须绑定用户点击事件，禁用异步触发；推荐用全屏 div 模拟，配合 fixed 遮罩与 z-index 控制，并通过 localStorage 防止重复弹出。
用 window.open() 实现最简插屏，但现代浏览器基本拦截
直接调 window.open() 弹新窗口，在 Chrome、Edge、Safari 下大概率被静默拦截——尤其没用户手势（如 click）触发时。哪怕加了 target="_blank" 也一样。
实操建议：
- 必须绑定在显式点击事件里，比如按钮的
onclick或addEventListener("click", ...) - 不能放在
setTimeout或异步回调中（如fetch().then(() => window.open(...))），会失去“用户激活”上下文 - URL 尽量传真实地址，空字符串或
"about:blank"更容易被拦 - 若真要弹外链，优先考虑跳转而非弹窗：
location.href = "https://ad.example.com"更可靠
用全屏 div 模拟插屏，兼容性好且可控
这是当前主流做法：不依赖新窗口，用定位 + z-index 叠一层遮罩 + 内容容器，本质是 DOM 层级控制。
关键点：
立即学习“前端免费学习笔记（深入）”；
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 遮罩层需设
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.7); z-index: 9999; - 广告内容
div在遮罩内居中，z-index高于遮罩（如10000），并加transform: translate(-50%, -50%)居中 - 务必提供显眼关闭按钮，绑定
onclick移除该遮罩节点或设display: none - 移动端注意加
touch-action: none到遮罩层，避免 iOS 上滑动穿透
自动触发时机怎么选？别一进页面就弹
用户还没看清内容就弹广告，跳出率飙升，还可能被浏览器标记为“滥用”（尤其 PWA 场景下影响安装提示）。
更合理的触发策略：
- 延迟触发：等页面加载完成 + 用户停留 ≥ 5 秒，再显示（用
setTimeout+document.visibilityState判断是否仍在前台） - 滚动触发：监听
scroll，当用户向下滚动超过首屏高度（window.innerHeight）后再展示 - 交互触发：比如点击“查看更多”、“下载”等按钮后才弹，转化意图明确，接受度高
- 禁止在
beforeunload或返回上一页时弹——既无效又招人烦
关闭后怎么防止重复弹？用 localStorage 记录即可
用户关了一次，刷新又弹，体验极差。简单记录状态就行，无需后端。
示例逻辑：
if (!localStorage.getItem('ad_closed')) {
showInterstitial();
} else {
// 不弹
}
document.getElementById('close-btn').onclick = () => {
document.getElementById('interstitial').style.display = 'none';
localStorage.setItem('ad_closed', '1');
};
注意：
- 别用
sessionStorage，关掉标签页就失效，用户换个标签重进还会弹 - 如果广告有有效期（比如 24 小时弹一次），存时间戳而非布尔值：
localStorage.setItem('ad_last_shown', Date.now()) - 隐私模式下
localStorage可能不可用，需加 try/catch 包裹
