How to only display part of web page content (swift)

Question

I am brand new to coding (no background in any programming language at all). I am trying to learn swift. I am wanting to create a simple weather app that displays weather information in text once the user enters a city. I am grabbing the content from weather-forecast.com. I have figured out how to load the web content, but I want to only display a snippet (one paragraph) of the content from the page, not the whole page. Can someone please show me how to do that?

{
import UIKit

class ViewController: UIViewController, UIWebViewDelegate {

    @IBOutlet weak var cityText: UITextField!

    @IBOutlet weak var webContent: UIWebView!

    @IBAction func GoButtonPressed(sender: AnyObject) {

        let url = NSURL (string: "http://www.weather-forecast.com");
        let requestObj = NSURLRequest(URL: url!); 
        webContent.loadRequest(requestObj);
    }

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

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }    
}
}

Answer 1

Here is an example of simple view controller which loads only part of the website dribble.com. The controller has method to select the DOM element and only show that element. It is quite simple, yet powerful enough to show how you could work further on this.

import UIKit
import JavaScriptCore
import WebKit

class TestViewController: UIViewController {

    private weak var webView: WKWebView!

    private var userContentController: WKUserContentController!

    override func viewDidLoad() {
        super.viewDidLoad()
        createViews()

        loadPage("https://dribbble.com/", partialContentQuerySelector: ".dribbbles.group")
    }

    private func createViews() {
         userContentController = WKUserContentController()

        let configuration = WKWebViewConfiguration()
        configuration.userContentController = userContentController

        let webView = WKWebView(frame: view.bounds, configuration: configuration)
        webView.setTranslatesAutoresizingMaskIntoConstraints(false)
        view.addSubview(webView)

        let views: [String: AnyObject] = ["webView": webView, "topLayoutGuide": topLayoutGuide]
        view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[topLayoutGuide][webView]|", options: .allZeros, metrics: nil, views: views))
        view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[topLayoutGuide][webView]|", options: .allZeros, metrics: nil, views: views))


        self.webView = webView
    }

    private func loadPage(urlString: String, partialContentQuerySelector selector: String) {
        userContentController.removeAllUserScripts()
        let userScript = WKUserScript(source: scriptWithDOMSelector(selector),
        injectionTime: WKUserScriptInjectionTime.AtDocumentEnd,
            forMainFrameOnly: true)

        userContentController.addUserScript(userScript)

        let url = NSURL(string: urlString)!
        webView.loadRequest(NSURLRequest(URL: url))
    }

    private func scriptWithDOMSelector(selector: String) -> String {
        let script =
        "var selectedElement = document.querySelector('\(selector)');" +
        "document.body.innerHTML = selectedElement.innerHTML;"
        return script
    }

}

The view controller shown in the example above only loads photos, design section inside the dribble website.

Answer 2

You won't be able to do that easily - UIWebView doesn't have any API to expose the structure of the web page it is loading nor to control/permit partial loading of a page.

Perhaps you might be able to scrape the content of the page and then display it, but you would do this before loading it in the UIWebView, and after you've scraped it then a web view is probably not the best way to display it anyway.

Do some searching for html and web scraping to see what the term means.

Alternatively if you know the web page content structure, you can inject javascript into the page as UIWebView is loading it and that javascript would stop the other parts of the page from being displayed (but if weather-forecast.com change the structure of their html in the future your javascript would probably no longer work)

Either way, both seems a bit too complex for a beginner though unless perhaps you can pick things up quick and are competent but its a lot to learn.

Answer 3

Instead of getting data off a website you could install a weather API into your app. This would be quicker and probably easier as with most weather API's you could choose what information to display.

Some more information on how to install a weather API is to go to this website.

Hope I solved your problem, Toby