【问题标题】:WKWebView is not scrolling the content to mapped HTMLWKWebView 没有将内容滚动到映射的 HTML
【发布时间】:2018-11-13 10:04:11
【问题描述】:

我正在开发 WKWebView 以在 WKWebView 中呈现 HTML。

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

这个锚标记会将我的 WKWebView 推送到映射到它的内容。 我的完整 HTML 是:

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

我处理链接按钮的代码如下:

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

    }

当点击锚标记时,它应该滚动 WKWebview 到在 HTML 中映射到它的内容,这不会发生。

I am using Xcode 10 and working on iOS 11

我不知道缺少什么我几乎尝试了所有方法,但它没有滚动到锚标记中的映射数据以查看 HTML,您可以将我的 HTML 粘贴到

https://codebeautify.org/htmlviewer/

请检查并告诉我我错过了什么。

提前谢谢你。 :)

【问题讨论】:

    标签: ios swift wkwebview xcode10 wknavigationdelegate


    【解决方案1】:
    1. 确保您的 HTML 验证 - 您对 &lt;p&gt; 标记的使用无效(例如,标题 &lt;h3&gt; 不能驻留在 p 标记中); &lt;title&gt;&lt;/title&gt; 为必填项
    2. name 现在已过时,请在最近的容器上使用 id 属性,例如在封闭的div 元素上

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

    【讨论】:

    • 当我在 HTML Viwer 中运行我的 HTML 时,它工作正常。您能否按照您的建议更改 HTML 并让我检查
    • 我在我的视图控制器中尝试了你的一段代码,但它没有按预期工作,我认为 HTML 需要更正。
    • HTML 在浏览器或查看器中呈现“良好”的事实并不意味着它是正确的(引擎试图代表您解决很多问题)。使用validator.w3.org/nu/#textarea 进行验证。
    • 我已经根据验证器更改了我的 html,但它仍然没有解决目的。当我单击链接 1 时,它应该将我拖到与该锚标记关联的标记。我希望你明白我在说什么
    • 我已经编辑了我的问题,并在验证器测试后添加了最新的 html
    猜你喜欢
    • 1970-01-01
    • 2019-01-13
    • 1970-01-01
    • 2020-12-06
    • 1970-01-01
    • 1970-01-01
    • 2016-01-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多