在使用UIWebView/WKWebView时出现奇怪的填充问题

Question

在模拟器和真实设备上，我发现页面左右两边有白色的填充。另外，我也想去掉顶部栏。在 Main.storyboard 上，我使用了 UIWebView/WKWebView：

我尝试将约束值设置为 -20，但没有反应。以下是代码：

 @IBOutlet var webView: WKWebView!


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        self.automaticallyAdjustsScrollViewInsets = false;

        let url = NSURL(string: "https://www.google.ru/");
        var req = NSURLRequest(URL: url!);
        webView.loadRequest(req);

    }

我也尝试在开始测试谷歌之前向我的网页添加了 body { padding: 0; margin: 0; }，我检查了Safari-它完美地适配了谷歌图片。但是，我尝试的所有方法都没有帮助我解决如何在WKWebView中删除左/右白色填充的问题。

- Александр Савинов

---

看起来你的前导/尾随约束相对于边距。让它们不再相对于边距，看看会发生什么。 - Rory McKinnel

Answer 1

看起来WKWebView自带一个对body标签设置margin的样式。您可以通过创建WKWebViewConfiguration并使用包含margin 0的body样式进行初始化的配置来删除它。

let config = WKWebViewConfiguration()
let bodyStyle = "body { margin:0; }"
let source = "var node = document.createElement(\"style\"); node.innerHTML = \"\(bodyStyle)\";document.body.appendChild(node);"

let script = WKUserScript(
            source: source,
            injectionTime: .AtDocumentEnd,
            forMainFrameOnly: false
        )

config.userContentController.addUserScript(script)
webView = WKWebView(frame: CGRectZero, configuration: config)

或者，快速且简单的方法是只需为您的视图添加内联样式。（我没有尝试过这种方法）

- Bueno

---

我在webview中自己加载HTML源代码。 添加样式标签并将边距设置为零对我有用。 <style> body{margin:0;} </style> - akshay1188

这个解决方案也可以通过在webview完成加载时实现self.webview.evaluateJavaScript("var node = document.createElement(\"style\"); node.innerHTML = \"body { margin:0; }\";document.body.appendChild(node);", completionHandler: nil)来实现。 - Raditya Kurnianto

谢谢。我有相同的问题，但在官方文档中没有找到任何关于它的内容。 - javi_swift

Answer 2

使用此行代码可删除顶部的填充。

self.webView = WKWebView(frame: .zero, configuration: config) self.webView.scrollView.contentInsetAdjustmentBehavior = .never

请注意，以上内容为IT技术相关内容，翻译时需要保持准确性和专业性。

- Ashi