Swift下WebKitWebView内容截取及scrollView contentSize为0的问题咨询

嘿，刚接触编程遇到这种问题太正常了，我来帮你一步步搞定～

首先解决webView.scrollView.contentSize.height输出0.0的问题 #

你之所以得到0，是因为WKWebView加载页面是异步的——你可能在页面还没完全渲染完成的时候就去获取contentSize了，这时候网页内容还没加载出来，高度自然是0。

解决方法很简单：实现WKNavigationDelegate的页面加载完成回调，在回调里再获取contentSize。示例代码如下：

class YourViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化WKWebView
        let webConfig = WKWebViewConfiguration()
        webView = WKWebView(frame: view.bounds, configuration: webConfig)
        webView.navigationDelegate = self // 设置代理
        view.addSubview(webView)
        
        // 加载维基百科页面
        if let wikiURL = URL(string: "https://en.wikipedia.org/wiki/Your_Target_Page") {
            webView.load(URLRequest(url: wikiURL))
        }
    }

    // 页面加载完成的回调
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 现在这里获取的contentSize就是正确的了
        print("页面内容高度：\(webView.scrollView.contentSize.height)")
        
        // 在这里添加裁剪最后100px的逻辑
    }
}

然后实现“去掉页面最后100px内容”的需求 #

这里有两种常用方案，你可以根据需求选择：

方案一：注入CSS直接裁剪网页内容（推荐） #

这种方法直接修改网页的样式，效果最稳定，不会出现滚动时的边界问题。在页面加载完成的回调里，用evaluateJavaScript注入CSS代码：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 注入CSS，裁剪页面底部100px
    let clipCSS = """
        // 裁剪整个body的底部100px
        document.body.style.clipPath = 'inset(0 0 100px 0)';
        document.body.style.overflow = 'hidden';
    """
    
    webView.evaluateJavaScript(clipCSS) { result, error in
        if let err = error {
            print("注入CSS出错：\(err.localizedDescription)")
        }
    }
}

如果只想裁剪维基百科的主内容区域（不想影响顶部导航栏），可以针对它的专属容器类.mw-body-content设置：

let targetCSS = """
    var contentBox = document.querySelector('.mw-body-content');
    if (contentBox) {
        let originalHeight = contentBox.offsetHeight;
        contentBox.style.maxHeight = (originalHeight - 100) + 'px';
        contentBox.style.overflow = 'hidden';
    }
"""
webView.evaluateJavaScript(targetCSS) { result, error in
    if let err = error {
        print("注入CSS出错：\(err.localizedDescription)")
    }
}

方案二：通过ScrollView限制滚动范围 #

如果你不想修改网页本身，只是想阻止用户滚动到最后100px，可以通过UIScrollViewDelegate来限制滚动偏移：

// 先让ViewController遵守UIScrollViewDelegate
class YourViewController: UIViewController, WKNavigationDelegate, UIScrollViewDelegate {
    // ... 之前的初始化代码 ...

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        webView.scrollView.delegate = self // 设置scrollView的代理
    }

    // 监听滚动事件，限制最大滚动偏移
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // 计算允许的最大Y偏移量：内容高度 - 屏幕高度 - 要隐藏的100px
        let maxAllowedY = scrollView.contentSize.height - scrollView.bounds.height - 100
        // 如果滚动超过了这个值，强制拉回
        if scrollView.contentOffset.y > maxAllowedY {
            scrollView.contentOffset.y = maxAllowedY
        }
    }
}

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