iOS原生App需在WKWebView加载完成后再注入水印JS脚本，通过动态创建fixed定位div实现倾斜透明文字覆盖，须适配背景色、缩放及滚动优化，并规避CSP、iframe沙箱等限制。
iOS 原生 App 如何安全注入水印到 WebView 中的 HTML5 页面
不能直接“调用 HTML5 水印”，iOS 侧没有现成 API 把水印“塞进”网页里；实际做法是：在 WKWebView 加载完成、DOM 可操作后，用 JavaScript 注入水印逻辑。关键不是“调用”，而是“时机 + 注入方式 + 样式隔离”。
- 必须等
webView(_: didFinishNavigation:)触发后再执行 JS 注入，过早执行（如webView(_: didStartNavigation:)）会导致 DOM 未就绪，document.body为null - 避免用
evaluateJavaScript(_:completionHandler:)直接传大段字符串拼接 JS，易被 XSS 过滤或引号转义破坏；推荐将水印脚本封装为独立字符串常量，用String(format:)动态填入文字/坐标参数 - 水印需用
position: fixed+pointer-events: none，否则会遮挡页面点击，且要加z-index: 2147483647（iOS WebKit 最高有效值）确保压在所有层之上
水印文字倾斜+透明叠加的 JS 实现要点
HTML5 水印本质是动态创建一个全屏覆盖的 <div>，用 CSS transform 旋转文字并反复铺满背景。原生 iOS 不参与绘制，只负责把这段 JS 扔进网页上下文执行。
- 文字内容建议从 native 传入（如用户 ID、设备号），通过
evaluateJavaScript("addWatermark('\(userID)')")调用预定义函数，而非在 JS 里硬编码 - 倾斜角度用
transform: rotate(-25deg)，不要用-30deg或更大——iOS Safari 对大角度 rotate 渲染有锯齿，-22° ~ -28° 是清晰度与辨识度平衡点 - 透明度设为
opacity: 0.08，比常规的 0.1 更不易干扰阅读，同时仍可被截图识别；低于 0.06 在 Retina 屏上基本不可见 - 务必在 JS 中检测
window.getComputedStyle(document.body).backgroundColor，若为浅色背景则水印文字用深灰（#333），深色背景则切为浅灰（#ccc），否则反差失效
WKWebView 中 JS 注入失败的常见错误现象
不是 JS 写错了，而是环境或权限卡住了。典型报错：TypeError: null is not an object (evaluating 'document.body.appendChild') 或完全静默无反应。
-
WKWebViewConfiguration里没开javaScriptEnabled = true（默认是 true，但自定义 config 时容易漏设） - 网页用了
Content-Security-Policy头禁止'unsafe-eval'，导致eval类执行失败；此时必须改用document.createElement('script')+appendChild动态加载水印脚本 - 注入发生在
navigationAction.request.url重定向过程中（比如 OAuth 跳转），此时页面已卸载，JS 执行被丢弃；应监听webView(_: didFinishNavigation:)的 final URL，确认是目标页面再注入 - iOS 15.4+ 对跨域 iframe 内 JS 注入加了限制，若水印需覆盖 iframe 子页面，必须在子页面自身 JS 中实现，主页面无法越界操作
为什么不用 CSS @media print 或 background-image？
因为那些方案对 iOS WebView 完全无效：打印样式不触发、background-image 会被页面 CSS 覆盖且无法固定定位，更无法响应滚动。
立即学习“前端免费学习笔记（深入）”；
- 真正在 iOS 上稳定生效的只有「绝对定位 DOM 节点 + pointer-events: none」这一种路径
- 如果水印需随页面缩放自适应，别用
px单位，全部改用vw/vh（例如font-size: 2.4vw），否则在 iPhone SE 和 Pro Max 上显示大小差异巨大 - 滚动时水印抖动？那是没加
will-change: transform到水印容器，iOS WebKit 需显式提示硬件加速，否则 repaint 频率跟不上 scroll event
真正难的不是写几行 JS，而是判断当前页面是否允许注入、是否已被其他脚本污染、是否处于 iframe 沙箱环境——这些边界情况不处理，水印就只在 demo 页里有效。
