iOS开发：如何伪造WKWebView窗口高度控制自适应元素尺寸？

要让多数网站认为窗口高度固定为指定值（如500px），不受WKWebView实际尺寸变化影响，核心是通过JavaScript重写窗口高度相关属性的读取逻辑，并拦截resize事件，具体实现如下：

核心JavaScript代码 #

在网页加载完成后注入以下JS代码，强制网站读取到的窗口高度为固定值：

// 固定窗口 innerHeight 和 outerHeight 为 500px
Object.defineProperty(window, 'innerHeight', {
  get: () => 500,
  configurable: true
});

Object.defineProperty(window, 'outerHeight', {
  get: () => 500,
  configurable: true
});

// 固定文档根元素的 clientHeight（部分网站依赖此值）
Object.defineProperty(document.documentElement, 'clientHeight', {
  get: () => 500,
  configurable: true
});

// 拦截resize事件，阻止网站监听尺寸变化后重新计算布局
window.addEventListener('resize', (e) => {
  e.stopImmediatePropagation();
}, true);

代码说明 #

• 使用Object.defineProperty重写属性的getter方法，让网站读取window.innerHeight、window.outerHeight和document.documentElement.clientHeight时始终返回固定的500px。
• 通过捕获阶段的resize事件监听，阻止事件继续传播，避免网站因WKWebView尺寸调整触发的resize事件重新计算布局。

在iOS中注入JS的实现 #

在WKWebView加载完成后，通过evaluateJavaScript方法注入上述代码，再执行截图操作：

Objective-C示例 #

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    NSString *fixedHeightJS = @"Object.defineProperty(window, 'innerHeight', {get: () => 500, configurable: true}); Object.defineProperty(window, 'outerHeight', {get: () => 500, configurable: true}); Object.defineProperty(document.documentElement, 'clientHeight', {get: () => 500, configurable: true}); window.addEventListener('resize', (e) => {e.stopImmediatePropagation();}, true);";
    [webView evaluateJavaScript:fixedHeightJS completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        // JS注入完成后执行截图逻辑
        [self captureWebViewContent:webView];
    }];
}

Swift示例 #

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    let fixedHeightJS = """
    Object.defineProperty(window, 'innerHeight', {get: () => 500, configurable: true});
    Object.defineProperty(window, 'outerHeight', {get: () => 500, configurable: true});
    Object.defineProperty(document.documentElement, 'clientHeight', {get: () => 500, configurable: true});
    window.addEventListener('resize', (e) => {
        e.stopImmediatePropagation();
    }, true);
    """
    webView.evaluateJavaScript(fixedHeightJS) { [weak self] (result, error) in
        guard let self = self else { return }
        // 执行截图操作
        self.captureWebViewContent(webView)
    }
}

注意事项 #

• 少数极端网站可能通过其他方式（如screen.height或元素getBoundingClientRect）检测尺寸，此时可能需要针对性补充重写逻辑，但该方案已覆盖绝大多数依赖窗口高度的自适应场景。
• 确保JS注入时机在网页完全加载完成后（如webViewDidFinishNavigation回调中），避免未加载完成的DOM导致属性重写失效。

内容的提问来源于stack exchange，提问作者David