是否可以隐藏 HTML 元素？

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)

   }
}

Link 到站点：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 元素？

Is it possible to hide HTML Elements?

html

javascript

web-scraping

swift

wkwebview