WKWebView is not scrolling the content to mapped HTML

Question

I am working on the WKWebView to render the HTML in WKWebView.

My HTML has <a href ='#bottom'>

This anchor tag will push my WKWebView to the content mapped to it. My full HTML is :

<!DOCTYPE html><html lang="en"><head> <title>Hello</title><style>body{ font-size: 40px;}</style> </head><body><a id='LnkTop'></a><p><a href='#bottom'> Link 1</a></p><div><h3><a id='top'> Link 1 </a>click will bring cursor here..</h3><p>HTML offers many of the conventional publishing idioms for rich text and structured documents, but what separates it from most other markup languages is its featuresfor hypertext and interactive documents. This section introduces the link (or hyperlink, or Web link), the basic hypertext construct.A link is a connection from one Web resource to another. Although a simple concept, the link has been one of the primary forces driving the success of the Web.A link has two ends -- called anchors -- and a direction. The link starts at the 'source' anchor and points to the 'destination' anchor,which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).</p></div><div id='bottom'><h3>Link 2 click will bring cursor here..</h3><p>HTML offers many of the conventional publishing idioms for rich text and structured documents, but what separates it from most other markup languages is its featuresfor hypertext and interactive documents. This section introduces the link (or hyperlink, or Web link), the basic hypertext construct.A link is a connection from one Web resource to another. Although a simple concept, the link has been one of the primary forces driving the success of the Web.A link has two ends -- called anchors -- and a direction. The link starts at the 'source' anchor and points to the 'destination' anchor,which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).</p></div></body></html>

My Code to handle the link button is as below:

func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!) {
        print("Strat to load")

    }
    func webView(_ webView: WKWebView, shouldPreviewElement elementInfo: WKPreviewElementInfo) -> Bool {
        print("Raghav")
        return true
    }
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        print(error.localizedDescription)
    }
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        print("Strat to load")
    }
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("finish to load")
        webviewReportNotes.evaluateJavaScript("window.scrollTo(0,0)", completionHandler: nil)
    }

    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        print("error ")
        print(error)
    }

    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        print("clicked")
        if navigationAction.navigationType == WKNavigationType.linkActivated  {
            print("cancel")
            ///webviewReportNotes.evaluateJavaScript("window.scrollTo(0,0)", completionHandler: nil)
            decisionHandler(.cancel)
            self.webviewReportNotes.allowsLinkPreview = true
           // webView.load(navigationAction.request)
        }
        else
        {
            print("allow")
            decisionHandler(.allow)
        }
    }

    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        print("comitted")
    }
    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        print("entered")
        if navigationAction.targetFrame == nil {
            webView.load(navigationAction.request)
        }
        return nil

    }

When click on the anchor tag it should scroll WKWebview to the content mapped to it in HTML which is not happening.

I am using Xcode 10 and working on iOS 11

I don't know what is missing I have tried almost everything but it is not scrolling to mapped data in anchor tag to have a view of HTML , you can paste my HTML in

https://codebeautify.org/htmlviewer/

Please check and let me know what am I missing.

thank you in advance. :)

Peter Pajchl Peter Pajchl · Accepted Answer · 2018-11-13T10:43:02

Make sure that your HTML validates - your use of <p> tag is invalid (headers <h3> cannot reside in p tags e.g.); <title></title> is required
name is now obsolete, use id attribute instead on nearest container e.g. on the enclosing div element

import UIKit
import WebKit

class ViewController: UIViewController {
    let webView = WKWebView()
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addSubview(webView)
        let html = "<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml'><head> <title>Hello</title><style>body{ font-size: 40px;}</style> </head><body><a name='LnkTop'></a><p><a href='#bottom'> Link 1</a></p><div>                                <h3><a name='top'> Link 1 </a>click will bring cursor here..                                </h3><p>HTML offers many of the conventional publishing idioms for rich text and structured documents, but what separates it from most other markup languages is its features                                for hypertext and interactive documents. This section introduces the link (or hyperlink, or Web link), the basic hypertext construct.A link is a connection from one Web resource to another. Although a simple concept, the link has been one of the primary forces driving the success of the Web.A link has two ends -- called anchors -- and a direction. The link starts at the 'source' anchor and points to the 'destination' anchor,which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).</p></div><div id=\"bottom\"><h3>Link 2 click will bring cursor here..</h3><p>HTML offers many of the conventional publishing idioms for rich text and structured documents, but what separates it from most other markup languages is its featuresfor hypertext and interactive documents. This section introduces the link (or hyperlink, or Web link), the basic hypertext construct.A link is a connection from one Web resource to another. Although a simple concept, the link has been one of the primary forces driving the success of the Web.A link has two ends -- called anchors -- and a direction. The link starts at the 'source' anchor and points to the 'destination' anchor,which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).</p></div></body></html>"
        webView.loadHTMLString(html, baseURL: nil)
        webView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
        webView.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
        webView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
        webView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
        webView.translatesAutoresizingMaskIntoConstraints = false
    }
}

WKWebView is not scrolling the content to mapped HTML

1 Answers