必须绑定真实用户点击动作，否则100%被拦截；因现代浏览器ua机制仅认可同步、明确的用户手势（如click、keydown），异步调用window.open()或showmodal()会因丢失用户激活上下文而失败。

网页广告点击后展开，必须绑定真实用户点击动作，否则 100% 被浏览器拦截；不能靠页面加载、滚动或定时器触发。

为什么 window.open() 和自动 showModal() 都会失败

现代浏览器对非用户主动触发的弹窗拦截极其严格。控制台常见错误是：Blocked opening 'xxx' in a new window because the request was made without user activation. 或 Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document.。这些不是代码写错了，而是 UA（User Activation）机制在起作用——它只认“鼠标点击”“键盘回车/空格”这类明确、同步、不可绕过的交互。

常见误操作包括：

• 用 setTimeout 延迟 2 秒后调用 showModal()
• 监听 scroll 事件，滚动到某位置就弹出
• 在 fetch 成功回调里直接打开弹窗
• 给按钮加了 onclick，但实际绑的是父容器的委托事件，且未校验 event.target

用 <dialog></dialog> 实现点击展开广告的可行路径

<dialog></dialog> 是语义最干净的选择，自带遮罩（dialog::backdrop）、焦点锁定和 ESC 关闭支持，但必须满足两个硬条件：用户点击触发 + 元素已挂载 DOM。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

实操要点：

• 广告按钮必须是独立可点击元素（如 <button type="button">查看详情</button>），不能是 <div> 模拟 <li> <code><dialog></dialog> 标签需在 HTML 中静态存在（不能 JS 动态 document.createElement('dialog') 后再 append），否则 Safari 和旧 WebView 会报错
• 触发逻辑只能是：button.addEventListener('click', () => dialog.showModal())，不能包裹在 Promise.then 或 async 函数里
• Safari 16.4+ / iOS 16.4+ 才完整支持 showModal()；若需兼容更早版本，得 fallback 到 dialog.show() + 手动加遮罩层

自己写 <div> 弹窗时的关键避坑点 <p>当 <code><dialog></dialog> 兼容性不满足时，手写弹窗仍是主流方案，但核心矛盾不是“怎么显示”，而是“怎么不被拦”和“怎么稳居中”。

必须处理的细节：

• 遮罩层用 position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;，内容层 z-index: 1001，避免被导航栏、微信内置广告位盖住
• 居中别依赖 transform: translate(-50%, -50%) —— iOS Safari 在缩放或横屏切换时容易偏移；推荐用 inset: 0; margin: auto;（需检查目标浏览器是否支持 inset）或 JS 动态计算 top/left
• 打开时执行：document.body.style.overflow = 'hidden'; savedY = window.scrollY;；关闭时恢复：document.body.style.overflow = ''; 并 window.scrollTo(0, savedY)
• 移动端务必加 touch-action: manipulation 到弹窗容器，否则可能要点击两下才触发关闭

真正难的不是写出展开动画，而是让第一次点击必然触发、每次都能稳定居中、关掉后用户还在原来的位置、且不被任何 UA 当成恶意行为干掉。这些细节一旦漏掉一个，广告就等于没展出来。