iOS 创建一个简单的WebBrowser

示例

import UIKit
import WebKit


class ViewController: UIViewController, UISearchBarDelegate, WKNavigationDelegate, WKUIDelegate {
    
    var searchbar: UISearchBar! //所有的网络浏览器都有一个搜索栏。
    var webView: WKWebView! //我们将使用WKWebView。
    var toolbar: UIToolbar! //就像Safari中一样,位于底部的工具栏。
    var activityIndicator: UIActivityIndicatorView! //活动指示器,使用户知道页面正在加载。

    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.initControls()
        self.setTheme()
        self.doLayout()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }


    func initControls() {
       self.searchbar= UISearchBar()
        
        //WKUserContentController允许我们将Javascript脚本添加到我们的webView中,该脚本将在页面加载开始时或页面加载结束时运行。

        let configuration = WKWebViewConfiguration()
        let contentController = WKUserContentController()
       configuration.userContentController= contentController
        
        //使用自定义配置创建webView。
       self.webView= WKWebView(frame: .zero, configuration: configuration)
        
       self.toolbar= UIToolbar()
        self.layoutToolbar()

       self.activityIndicator= UIActivityIndicatorView(activityIndicatorStyle: .gray)
        self.activityIndicator.hidesWhenStopped = true
    }
    
    func setTheme() {
       self.edgesForExtendedLayout= UIRectEdge(rawValue: 0)
        self.navigationController?.navigationBar.barTintColor = UIColor.white()
        
        //为键盘和searchBar设置主题。设置代表。
        self.searchbar.delegate = self
        self.searchbar.returnKeyType = .go
        self.searchbar.searchBarStyle = .prominent
        self.searchbar.placeholder = "Search or enter website name"
        self.searchbar.autocapitalizationType = .none
        self.searchbar.autocorrectionType = .no
        
        //设置WebView的委托。
        self.webView.navigationDelegate = self //处理页面导航的代表
        self.webView.uiDelegate = self //处理新选项卡,窗口,弹出窗口,布局等的委托。

        self.activityIndicator.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
    }
    
    func layoutToolbar() {
        //浏览器通常具有后退按钮,前进按钮,刷新按钮和newTab / newWindow按钮。

        var items = Array<UIBarButtonItem>()
        
        let space = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        
        items.append(UIBarButtonItem(title: "<", style: .plain, target: self, action: #selector(onBackButtonPressed)))
        items.append(space)
        items.append(UIBarButtonItem(title: ">", style: .plain, target: self, action: #selector(onForwardButtonPressed)))
        items.append(space)
        items.append(UIBarButtonItem(barButtonSystemItem: .refresh, target: self, action: #selector(onRefreshPressed)))
        items.append(space)
        items.append(UIBarButtonItem(barButtonSystemItem: .organize, target: self, action: #selector(onTabPressed)))
        
        self.toolbar.items = items
    }
    
    func doLayout() {
        //将searchBar添加到navigationBar。
        self.navigationItem.titleView = self.searchbar
        
        //将所有其他子视图添加到self.view。
        self.view.addSubview(self.webView)
        self.view.addSubview(self.toolbar)
        self.view.addSubview(self.activityIndicator)
        
        //设置将限制哪些视图。

        let views: [String: AnyObject] = ["webView": self.webView, "toolbar": self.toolbar, "activityIndicator": self.activityIndicator];
        var constraints = Array<String>();
        
        constraints.append("H:|-0-[webView]-0-|")
        constraints.append("H:|-0-[toolbar]-0-|")
        constraints.append("V:|-0-[webView]-0-[toolbar(50)]-0-|")
        
        
        //使用上述视觉约束来约束子视图。

        for constraint in constraints {
            self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views))
        }
        
        for view in self.view.subviews {
           view.translatesAutoresizingMaskIntoConstraints= false
        }
        
        
        //将活动指示器约束到视图的中心。
        self.view.addConstraint(NSLayoutConstraint(item: self.activityIndicator, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1.0, constant: 0.0))
        self.view.addConstraint(NSLayoutConstraint(item: self.activityIndicator, attribute: .centerY, relatedBy: .equal, toItem: self.view, attribute: .centerY, multiplier: 1.0, constant: 0.0))
    }
    
    //搜索栏代表
    
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        self.searchbar.resignFirstResponder()
        
        if let searchText = self.searchbar.text, url = URL(string: searchText) {
            //从搜索栏中获取URL。使用它创建一个新的NSURLRequest,并告诉webView导航到该URL /页面。如果页面花费的时间太长,还请指定一个超时时间。还处理cookie /缓存策略。

            let request = URLRequest(url: url, cachePolicy: .useProtocolCachePolicy, timeoutInterval: 30)
            self.webView.load(request)
        }
    }
    
    
    //工具栏代表
    
    func onBackButtonPressed(button: UIBarButtonItem) {
        if (self.webView.canGoBack) { //允许用户返回上一页。
            self.webView.goBack()
        }
    }
    
    func onForwardButtonPressed(button: UIBarButtonItem) {
        if (self.webView.canGoForward) { //允许用户前进到下一页。
            self.webView.goForward()
        }
    }
    
    func onRefreshPressed(button: UIBarButtonItem) {
        self.webView.reload()  //重新加载当前页面。
    }
    
    func onTabPressed(button: UIBarButtonItem) {
        //待办事项:打开一个新标签或网页。
    }
    
    
    //WebView代表
    
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: (WKNavigationActionPolicy) -> Void) {
        
        decisionHandler(.allow) //允许用户导航到请求的页面。
    }
    
    func webView(_ webView: WKWebView, decidePolicyFor navigationResponse: WKNavigationResponse, decisionHandler: (WKNavigationResponsePolicy) -> Void) {
        
        decisionHandler(.allow) //允许webView处理响应。
    }
    
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        self.activityIndicator.startAnimating()
    }
    
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: NSError) {
        self.activityIndicator.stopAnimating()

        //处理错误。向用户显示警报,告诉他们发生了什么。
        
        let alert = UIAlertController(title: "Error", message: error.localizedDescription, preferredStyle: .alert)
        let action = UIAlertAction(title: "OK", style: .default) { (action) in
            alert.dismiss(animated: true, completion: nil)
        }
        alert.addAction(action)
        self.present(alert, animated: true, completion: nil)
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        self.activityIndicator.stopAnimating()
        
        //使用网页的最终端点URL更新我们的搜索栏。
        if let url = self.webView.url {
            self.searchbar.text =url.absoluteString?? self.searchbar.text
        }
    }
    
    func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!) {
        //When the webview receives a "Redirect" to a different page or endpoint, this is called.
    }
    
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        //当网页的内容开始到达时,将调用它。
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: NSError) {
        
    }
    
    func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
        
        completionHandler(.performDefaultHandling, .none) //默认情况下处理SSL连接。我们不进行SSL固定或自定义证书处理。
        
    }
    
    
    //WebView的UINavigation委托
    
    //当webView或现有的加载页面要打开新窗口/标签时,将调用此方法。
    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        
        //代表新标签页/窗口的视图。该视图的左上角将带有一个X按钮+一个webView。
        let container = UIView()
        
        //新标签页需要退出按钮。
        let XButton = UIButton()
        XButton.addTarget(self, action: #selector(onWebViewExit), for: .touchUpInside)
        XButton.layer.cornerRadius = 22.0
        
        //创建新的webView窗口。
        let webView = WKWebView(frame: .zero, configuration: configuration)
       webView.navigationDelegate= self
       webView.uiDelegate= self
        
        //布置选项卡。
        container.addSubview(XButton)
        container.addSubview(webView)
        
        let views: [String: AnyObject] = ["XButton": XButton, "webView": webView];
        var constraints = Array<String>()
        
        constraints.append("H:|-(-22)-[XButton(44)]")
        constraints.append("H:|-0-[webView]-0-|")
        constraints.append("V:|-(-22)-[XButton(44)]-0-[webView]-0-|")
        
        
        //约束子视图。
        for constraint in constraints {
            container.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views))
        }
        
        for view incontainer.subviews{
           view.translatesAutoresizingMaskIntoConstraints= false
        }
        
        //待办事项:将containerView添加到self.viewor并使用新的控制器展示它。跟踪选项卡。
        
        return webView
    }
    
    func onWebViewExit(button: UIButton) {
        //TODO:销毁标签。从当前窗口或控制器中删除新选项卡。
    }
}


GO在键盘上显示自定义按钮:

在此处输入图片说明


显示工具栏和完全加载的页面。

在此处输入图片说明