WKWebView仅显示文档第一页，如何实现完整内容展示？

问题描述 #

使用WKWebView加载指定URL的文档时，仅显示第一页，无法展示完整内容，原代码如下：

import UIKit
import WebKit

class FactsheetViewController: UIViewController {

    let webView = WKWebView()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(webView)
        
        guard let url = URL(string: "https://doc.morningstar.com/LatestDoc.aspx?clientid=stanlibpro&key=35d0c11e52f21126&documenttype=52&investmentidtype=1&ISIN=ZAE000084869") else {
            return
        }
        webView.load(URLRequest(url: url))
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        webView.frame = view.bounds
    }

}

解决方案 #

问题根源是目标网页的CSS设置了分页布局，限制了内容的显示范围。可以通过注入JavaScript调整网页样式，同时优化WKWebView的配置来实现完整内容展示，修改后的代码如下：

import UIKit
import WebKit

class FactsheetViewController: UIViewController, WKNavigationDelegate {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 配置WKWebView，注入JS脚本调整网页样式
        let config = WKWebViewConfiguration()
        // 注入JS：移除分页样式，允许内容滚动显示全部
        let adjustStyleScript = WKUserScript(source: """
            // 移除分页相关的CSS属性，让所有页面块连续显示
            document.querySelectorAll('.page').forEach(page => {
                page.style.display = 'block';
                page.style.pageBreakAfter = 'auto';
                page.style.margin = '0';
            });
            // 确保body和容器高度自适应内容，允许滚动
            document.body.style.height = 'auto';
            document.body.style.overflow = 'auto';
            document.querySelector('.document-wrapper')?.style.height = 'auto';
        """, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
        config.userContentController.addUserScript(adjustStyleScript)
        
        // 初始化webView并设置代理
        webView = WKWebView(frame: .zero, configuration: config)
        webView.navigationDelegate = self
        webView.scrollView.isScrollEnabled = true
        view.addSubview(webView)
        
        // 加载目标URL
        guard let url = URL(string: "https://doc.morningstar.com/LatestDoc.aspx?clientid=stanlibpro&key=35d0c11e52f21126&documenttype=52&investmentidtype=1&ISIN=ZAE000084869") else {
            return
        }
        webView.load(URLRequest(url: url))
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        webView.frame = view.bounds
    }
    
    // 页面加载完成后再次调整样式（可选，确保样式生效）
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        webView.evaluateJavaScript("""
            document.body.scrollHeight;
        """) { [weak self] result, error in
            guard let self = self else { return }
            if let height = result as? CGFloat {
                self.webView.scrollView.contentSize = CGSize(width: self.view.bounds.width, height: height)
            }
        }
    }
}

关键修改点说明 #

• 注入自定义JavaScript：在网页加载完成后移除分页相关的CSS样式，让所有页面内容连续显示，同时设置容器高度自适应内容。
• 设置WKNavigationDelegate：在页面加载完成后，通过evaluateJavaScript确认内容高度，确保scrollView的contentSize正确设置，保证滚动正常。
• 显式启用滚动：确保webView的scrollView允许滚动，避免网页本身的设置限制滚动行为。

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