iOS调用HTML5添加水印技巧

• 文字内容建议从 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 页里有效。

到这里，我们也就讲完了《iOS调用HTML5添加水印技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！