Qt6.5 QWebEngineView html script

MYKJ · 10 Mar 2023, 05:09

Hello, any one can help me ? Thank you!

My project load local html with QWebEngineView, and it work well with Qt5.9.2 and Safari/Chrome.

Now, I update Qt to 6.5.0, and it cannot work with error " js: Uncaught ReferenceError: L is not defined", It looks like cannot parse script src.

Here is the html

<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body, html{width: 100%;height: 100%;margin:0;}
            #map_canvas{width:100%;height:100%;}
        </style>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    </head>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    
    <script language="javascript">
        
        function init() {
            var map = new L.Map('map_canvas');
            
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
                maxZoom: 18
            }).addTo(map);
            map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.
            
            var london = new L.LatLng(51.505, -0.09); // geographical point (longitude and latitude)
            map.setView(london, 13);
        }
    </script>
    
    <body onLoad="javascript:init();">
        <div id="map_canvas"></div>
    </body>
</html>

and here is the code about webengineview

       QWebEngineProfile profile;
     profile.installUrlSchemeHandler(QByteArrayLiteral("webui"), &handler);

    QWebEnginePage page(&profile);
    QWebEngineView view;
    QWebEngineSettings *settings = view.settings();
    //开启插件支持(如Flash player、文件拖拽等)
    settings->setAttribute(QWebEngineSettings::PluginsEnabled, true);
    settings->setAttribute(QWebEngineSettings::AllowWindowActivationFromJavaScript, true);
    settings->setAttribute(QWebEngineSettings::JavascriptEnabled, true);
    settings->setAttribute(QWebEngineSettings::JavascriptCanOpenWindows, true);
    settings->setAttribute(QWebEngineSettings::JavascriptCanPaste, true);
    settings->setAttribute(QWebEngineSettings::JavascriptCanAccessClipboard, true);
    settings->setAttribute(QWebEngineSettings::XSSAuditingEnabled, true);
    settings->setAttribute(QWebEngineSettings::LinksIncludedInFocusChain, true);
    settings->setAttribute(QWebEngineSettings::PdfViewerEnabled, true);
    settings->setUnknownUrlSchemePolicy(QWebEngineSettings::AllowAllUnknownUrlSchemes);
    
    view.setPage(&page);
    page.load(QUrl("qrc:/openstreet.html"));
    view.setContextMenuPolicy(Qt::NoContextMenu);
    view.resize(500, 600);

    view.show();

jsulm · 10 Mar 2023, 05:43

@MYKJ said in Qt6.5 QWebEngineView html script:

var map = new L.Map('map_canvas');

What is L?

MYKJ · 14 Mar 2023, 03:57

@jsulm L is defined from <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>, the problem looks like cannot parse this script.

rockyxia · 17 Mar 2023, 14:38

@MYKJ leaflet.js is not defined L

MYKJ · wrote on 17 Mar 2023, 14:38

@rockyxia If L is not defined, why it can work normally wifh safari and chrome?

fildaw · wrote on 22 Dec 2024, 22:25

Hello, were you able to fix this problem? I'm experiencing the same error using Qt6 WebView.

jennif56 · wrote on 17 Jan 2025, 09:15

hello i have je same problem
my code
main.cpp

#include <QApplication>
#include <QWebEngineView>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // Créer une instance de QWebEngineView
    QWebEngineView webView;

    // Charger la page HTML locale contenant la carte Leaflet
    webView.setUrl(QUrl::fromLocalFile("/leaflet_map.html")); // Replace with the path of your HTML file

    // Afficher la fenêtre
    webView.resize(800, 600); 
    webView.show();

    return app.exec();
}

leaflet_map.html

<!DOCTYPE html>
<html>
<head>
    <title>Carte Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        #map { height: 100%; }
        html, body { height: 100%; margin: 0; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([43.6108, 3.8767], 13); 
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
    </script>
</body>
</html>

I use Qt6.8.1 with the MSVC2022_64bit kit
I tested the html here https://html.onlineviewer.net/ and it works correctly.

jennif56 · wrote on 23 Jan 2025, 07:21

I found a solution to the problem: set QWebEngineSettings::LocalContentCanAccessRemoteUrls to true
add this to main.cpp file

#include <QWebEngineSettings>
webView.page()->settings()->setAttribute(QWebEngineSettings::LocalContentCanAccessRemoteUrls, true);

the link to the doc https://doc.qt.io/qt-6/qwebenginesettings.html

fildaw · wrote on 30 Jan 2025, 16:15

Thank you, it seems to be the case. Do you happen to know how to set this attribute in QML? I need to modify part of extension (plasmoid) for KDE Plasma, it uses QML to setup the WebView.