Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Is there a way I can display a local webpage inside of qml?



  • I'm trying to display a local html page inside a qml page, I googled and it says that I have to create a widget and display the html page inside of the widget, but that's kind of strange, so is there a way I can display local html page inside the qml window? thank you



  • Hi @mandruk1331

    which version of qt do you have?

    in Qt 5 you can use WebView QML object it is possible

    you can read doc here:

    http://doc.qt.io/qt-5/qml-qtwebview-webview.html

    there is also an example in qt examples,

    example:

    import QtQuick 2.0
    import QtQuick.Controls 1.0
    import QtWebKit 3.0
    
    ScrollView {
        width: 1280
        height: 720
        WebView {
            id: webview
            url: "path to your html local file"
            anchors.fill: parent
            onNavigationRequested: {
                // detect URL scheme prefix, most likely an external link
                var schemaRE = /^\w+:/;
                if (schemaRE.test(request.url)) {
                    request.action = WebView.AcceptRequest;
                } else {
                    request.action = WebView.IgnoreRequest;
                    // delegate request.url here
                }
            }
        }
    }
    

    I just tried to put a link of one html local file like this :

    url: file:///home/user/Desktop/your_html_file.html

    and it worked without any problem ,

    Hope this can help



  • Hi @mandruk1331

    which version of qt do you have?

    in Qt 5 you can use WebView QML object it is possible

    you can read doc here:

    http://doc.qt.io/qt-5/qml-qtwebview-webview.html

    there is also an example in qt examples,

    example:

    import QtQuick 2.0
    import QtQuick.Controls 1.0
    import QtWebKit 3.0
    
    ScrollView {
        width: 1280
        height: 720
        WebView {
            id: webview
            url: "path to your html local file"
            anchors.fill: parent
            onNavigationRequested: {
                // detect URL scheme prefix, most likely an external link
                var schemaRE = /^\w+:/;
                if (schemaRE.test(request.url)) {
                    request.action = WebView.AcceptRequest;
                } else {
                    request.action = WebView.IgnoreRequest;
                    // delegate request.url here
                }
            }
        }
    }
    

    I just tried to put a link of one html local file like this :

    url: file:///home/user/Desktop/your_html_file.html

    and it worked without any problem ,

    Hope this can help



  • @mostefa said in Is there a way I can display a local webpage inside of qml?:

    file:///

    OMG I have seen that one) It works, thank you very much. The problem was that i did not add the 'file:///' string. Thank you!



  • @mandruk1331

    Glad to see that this helped you, but instead of calling local file like we did, i advise you to put your html in qt ressource system

    and then just write url: "yourhtmlfile" instead of url :"file///......"

    it is better !



  • @mostefa Ok:-)


Log in to reply