Question

我正在尝试在WKWebView中实现高图。我成功地将整个html中的图表元素隔离开来。问题是现在，图表丢失了它的功能。有没有办法仍然加载整个页面，但只显示图表元素？

这是代码：

import Cocoa
import WebKit

class ViewController: NSViewController {

    var webView = WKWebView()

    private var userContentController: WKUserContentController!

    override func viewDidLoad() {
        super.viewDidLoad()

        let userContentController = WKUserContentController()
        let configuration = WKWebViewConfiguration()
        configuration.userContentController = userContentController
        let webView = WKWebView(frame: view.bounds, configuration: configuration)
        view.addSubview(webView)
        self.webView = webView

        userContentController.removeAllUserScripts()

        // Is there a possibility to just hide all Elements except 'document.body.innerHTML'?
        // So the highchart will keep it´s functionality

        let script =
            "var selectedElement = document.querySelector('.panel-body');" +
        "document.body.innerHTML = selectedElement.innerHTML;"


        let userScript = WKUserScript(source: script,
                                      injectionTime: WKUserScriptInjectionTime.atDocumentEnd,
                                      forMainFrameOnly: true)

        userContentController.addUserScript(userScript)

        let url = NSURL(string: "https://www.worldweatheronline.com/v2/weather-averages.aspx?locid=194044&root_id=192045&wc=local_weather&map=~/brussels-weather-averages/be.aspx")!
        webView.load(NSURLRequest(url: url as URL) as URLRequest)

   }
}

链接到网站：https://www.worldweatheronline.com/v2/weather-averages.aspx?locid=194044&root_id=192045&wc=local_weather&map=~/brussels-weather-averages/be.aspx

我现在尝试这几天，很乐意得到一些帮助。

Answer 1

如果存储对包含图表的DOM对象的引用，则应该能够清除正文innerHtml，然后附加图表。这将维护所有事件监听器和图表功能。

这是您可以注入的JavaScript：

var chartDiv = document.querySelector('.panel-body');
document.body.innerHTML = '';
document.body.append(chartDiv);

或者，您可以隐藏页面上的所有顶级元素，然后将图表附加到正文：

var chartDiv = document.querySelectorAll('.panel-body')[1];
document.querySelectorAll('body > *').forEach(function(el) { 
  el.style.display = 'none'; 
});
document.body.append(chartDiv);

Answer 2

您是否可以在页面上运行脚本？如果是这样，请在页面上插入jquery和脚本部分，然后直接使用hide()函数。

<script src="jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('#element_id_to_be_hidden').hide();
    });
</script>

是否可以隐藏HTML元素？

2 个答案: