CODEWITHSUNDEEP
iosswiftautolayoutwebkitwkwebview
user8794794
user8794794

Reputation:

WKWebView fullscreen instead of frame?

I am new to Swift 3.0 and I need some help...

I am trying to create a frame with should display a website. The website should not fill the entire view but just the frame. Every time I start the App, the website fills the entire screen and not just the frame... :(

This is my code:

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {


    @IBOutlet weak var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        let myURL = URL(string: "https://www.google.com/")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }
}

What I want:

image

What I get:

image

Upvotes: 6

Views: 12111

Answers (1)

Krunal
Krunal

Reputation: 79776

Add constraints (anchor) for webview with equal padding.

Try this with storyboard layout:

Remove loadView() code from your file:

enter image description here

Or Try this programatically:

import UIKit
import WebKit

class WebKitController: UIViewController {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let myURL = URL(string: "https://www.google.com/")
        let myRequest = URLRequest(url: myURL!)
        setupWKWebViewConstraints()
        webView.load(myRequest)
    }

    // add constraints to your web view
    func setupWKWebViewConstraints() {

        let paddingConstant:CGFloat = 30.0

        webView.translatesAutoresizingMaskIntoConstraints = false

        webView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: paddingConstant).isActive = true
        webView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -paddingConstant).isActive = true
        webView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: paddingConstant).isActive = true
        webView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -paddingConstant).isActive = true
    }

}

Upvotes: 5

Related Questions