WKWebview Anchor-tags within same page not woking

I have a number of Anchor-tags within a webpage that I display in my iPhone app utilizing WKWebView.

The problem is that clicking on the href tags does not take me to the corresponding anchor. This use to work fine when I was using UIWebView but now that I’ve migrated to WKWebView, it’s not working.

  • corebluetooth and ios states
  • Can I link GoogleMaps SDK for iOS with a linker flag other than -ObjC
  • How to take the parameter from URL scheme.
  • iOS / mobile safari still zooms while viewport is set to user-scalable=no ? Check Accessibility settings!
  • Save and retrieve value via KeyChain
  • iPhone app under test crashes after a few days
  • I’m setting the anchor tags as follows, trying to be HTML5 compliant:

    <a href="#Test1"> Test1. </a>

    <h2 id="Test1">

    When I display the webpage on any browser, or html editor, or within XCode external editor the anchor tags work just fine, but not within WKWebView.

    This is the stripped down test html (though it does have long text strings):

    <!DOCTYPE HTML>
    <html>
    <head>
        <title> </title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">     
            .btt {
            font-size: 10pt; 
            color: #000080;
        }
        </style>
    </head>
    <body>
    <h2 id="toc">
        Table of Contents.
    </h2>
    <ul>
        <li> <a href="#Test1"> Test1. </a> </li>
        <li> <a href="#Test2"> Test2. </a> </li>
        <li> <a href="#Test3"> Test3. </a> </li>
        <li> <a href="#Test4"> Test4. </a> </li>
    </ul>
    <h2 id="Test1">
        Test1 &nbsp;&nbsp;&nbsp; <a class="btt" href="#toc">Back to Top</a>
    </h2>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores 
    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore 
    et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
    dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod 
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
    dolor sit amet.
    
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at 
    vero eros et accumsan et iusto odio dignissim qui blandit praesent 
    luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
    volutpat.
    </p>
    <h2 id="Test2">
        Test2 &nbsp;&nbsp;&nbsp; <a class="btt" href="#toc">Back to Top</a>
    </h2>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores 
    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore 
    et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
    dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod 
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
    dolor sit amet.
    
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at 
    vero eros et accumsan et iusto odio dignissim qui blandit praesent 
    luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
    volutpat.
    </p>
    <h2 id="Test3">
        Test3 &nbsp;&nbsp;&nbsp; <a class="btt" href="#toc">Back to Top</a>
    </h2>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores 
    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore 
    et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
    dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod 
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
    dolor sit amet.
    
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at 
    vero eros et accumsan et iusto odio dignissim qui blandit praesent 
    luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
    volutpat.
    </p>
    <h2 id="Test4">
        Test4 &nbsp;&nbsp;&nbsp; <a class="btt" href="#toc">Back to Top</a>
    </h2>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores 
    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore 
    et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
    dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod 
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
    dolor sit amet.
    
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at 
    vero eros et accumsan et iusto odio dignissim qui blandit praesent 
    luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
    volutpat.
    </p>
    </body>
    </html>
    

    This is how I create WKWebView and load the html file in Obj-C:

    - (void) viewDidLoad
    {
        [super viewDidLoad];
        htmlContent = @"failexample";
        NSString *path = [[NSBundle mainBundle] pathForResource:htmlContent
            ofType:@"html"];
        NSFileHandle *readHandle = [NSFileHandle fileHandleForReadingAtPath:path];
        NSString *htmlString = [[NSString alloc] initWithData:[readHandle readDataToEndOfFile]                          
            encoding:NSUTF8StringEncoding];
    
        WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
    
        webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds 
            configuration:wkWebConfig];
        webView.navigationDelegate = self;
        webView.UIDelegate = self; 
        [webView loadHTMLString:htmlString baseURL:nil];
        [self.view addSubview:webView];
    }
    

    I know that the click is processed in decidePolicyForNavigationAction:

    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction
        decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
        if (navigationAction.navigationType == WKNavigationTypeLinkActivated) {
            NSLog(@"Got a click"):
        }
        decisionHandler(WKNavigationActionPolicyAllow);
    }
    

    Anyone have any idea what I’m doing wrong or what I need to do to get this to work?

    Solutions Collect From Internet About “WKWebview Anchor-tags within same page not woking”

    Your example works fine in iOS 10, so I would have to suggest you’ve found a bug in iOS 11. The best course would be to package everything up as a simple example project and submit to Apple as a bug report.

    (A little testing will reveal that much of what you’re doing, including the id and the navigation delegate, is irrelevant. The bug is that we don’t scroll to internal links at all. You should prune out whatever can be pruned out, to show the issue in the simplest form possible.)

    As a workaround, load your file thru a URLRequest:

        let url = Bundle.main.url(forResource: "failexample", withExtension: "html")!
        let req = URLRequest(url: url)
        wv.load(req)
    

    Or, use a local file URL:

        let url = Bundle.main.url(forResource: "failexample", withExtension: "html")!
        wv.loadFileURL(url, allowingReadAccessTo: url)
    

    The internal links will then work. (However, this workaround may not always be practical; I regard the problem as a bug nonetheless, especially since it worked fine in iOS 10.)