Search code examples
iosobjective-chrefwkwebview

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.

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?

Solution

  • 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.)

    UPDATE: This is fixed in iOS 12.