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 · Accepted Answer · 2018-11-13T12:01:08.607

3

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
    }
}

edited Nov 13 '18 at 12:01

answered Nov 13 '18 at 10:43

Peter Pajchl

2,699
21
24

When I run my HTML in HTML Viwer it is working fine.Can you please change the HTML as per your advise and let me check – Raghav Chopra Nov 13 '18 at 11:16
I tried your piece of code in my view controller and it is not working as expected I think HTML needs to be corrected. – Raghav Chopra Nov 13 '18 at 11:20
The fact that HTML renders "fine" in a browser or a viewer does not mean it's correct (engines try to fix a lot of issues on your behalf). Use https://validator.w3.org/nu/#textarea to verify it. – Peter Pajchl Nov 13 '18 at 11:26
I have changed my html as per the validator and it is still not solving the purpose.When I click on the Link 1 it should drag me to the tag associated with that anchor tag. I hope you understand what I am saying – Raghav Chopra Nov 13 '18 at 11:38
I have edited my question and added the latest html to it after the validator test – Raghav Chopra Nov 13 '18 at 11:39
I have further removed
tags and it is still not solving the purpose.I want to achieve when I click on my anchor tag hyperlink it should scroll the web view and drop me to the connected id
– Raghav Chopra Nov 13 '18 at 11:50
It does behave like that in my sample. Just to be clear - the browser will move the browser only as far as for the end of the document reaching bottom of the window. If you try my example and set the font-size e.g. to 80 to make the text really long on a screen you should see the jump when you click the link. – Peter Pajchl Nov 13 '18 at 11:54
Which OS Version are your checking, I am checking for 11.2 – Raghav Chopra Nov 13 '18 at 11:55
Test on iOS 11.2 and iOS 12 – Peter Pajchl Nov 13 '18 at 12:01
I am testing it on Simulator iPhone 5s 11.2, I am not sure why it is not working at my end.Is there anything which we need to enable or something like this – Raghav Chopra Nov 13 '18 at 12:17
Is there any configuration setting or something like this ? any Info.plist attribute – Raghav Chopra Nov 13 '18 at 12:27
There is no such requirement. Have you tried without your delegate method implementation? – Peter Pajchl Nov 13 '18 at 12:31
I have created a fresh view controller no delegate methods in it and pasted the same code, I wonder why it Is not working :( – Raghav Chopra Nov 13 '18 at 12:36
Swift Language version 4.0, Xcode 9.2 and Simulator 11.2 Ahhh Gosh what is wrong ? – Raghav Chopra Nov 13 '18 at 12:37
Do you think any other check can help me out ? – Raghav Chopra Nov 13 '18 at 12:57
does any one know how can we achieve scroll to anchor location when Wkwebview is inside a collectionviewcell/tableviewCell – iMinion Feb 12 '21 at 10:07

WKWebView is not scrolling the content to mapped HTML

1 Answers1