WKWebview同一页面内的锚点标签不会启动

我在我的iPhone应用程序中使用WKWebView显示的网页中有许多锚标签。

问题是,点击href标签不会把我带到相应的锚点。 这使用工作正常,当我使用UIWebView,但现在我已经迁移到WKWebView,它不工作。

我正在设置锚定标记如下,试图成为HTML5兼容:

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

<h2 id="Test1">

当我在任何浏览器,HTML编辑器或XCode外部编辑器中显示网页时,锚点标记工作得很好,但不在WKWebView中。

这是精简的testingHTML(尽pipe它有很长的文本string):

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

这是我如何创buildWKWebView并在Obj-C中加载html文件:

 - (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]; } 

我知道点击是在decidePolicyForNavigationAction中处理的:

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

任何人有任何想法我做错了什么,或者我需要做什么来得到这个工作?

您的示例在iOS 10中运行良好,因此我不得不build议您在iOS 11中发现了一个错误。最好的方法是将所有东西都打包成一个简单的示例项目,然后作为错误报告提交给Apple 。

(稍微的testing会发现你所做的很多事情,包括id和导航代理,都是不相关的,缺点是我们根本不滚动到内部链接应该修剪掉所有可以修剪的东西,以最简单的forms展示这个问题。)

作为解决方法,通过URLRequest加载您的文件:

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

或者,使用本地文件URL:

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

内部链接将工作。 (但是,这种解决方法可能并不总是切实可行;我认为这个问题是一个错误,尤其是因为它在iOS 10中运行良好。)