在QML webview中使用alert及confirm Dialogs

来源：互联网发布：四川大学口腔医学知乎编辑：程序博客网时间：2024/05/21 11:28

我们可以在QML应用中直接使用QML WebView来装载我们的HTML应用，但是如果我们的HTML文件中使用到alert及confirm，我们的应用可能并不能弹出我们需要的alert及confirm。这时，我们需要对WebView中的alertDialog及confirmDialog进行设计才可以起到作用。

我们在下面来展示如何去做：

index.html

<html>   <head>         <script type="text/javascript">         <!--            function getConfirmation(){               var retVal = confirm("Do you want to continue ?");               if( retVal == true ){                  return true;               }               else{                  return false;               }            }         //-->         <!--            function getAlert(){               alert("This is cool!");            }         //-->        <!--            function getPrompt(){               var retVal = prompt("Enter your name : ", "your name here");               // console.log("retVal: + " + retVal);            }         //-->      </script>         </head>   <body>      <p>Click the following button to see the result: </p>            <form>         <input type="button" value="Alert Dialog" onclick="getAlert();" /> <br>         <input type="button" value="Confirm Dialog" onclick="getConfirmation();" /> <br>         <input type="button" value="Prompt Dialog" onclick="getPrompt();" />      </form>         </body></html>

Main.qml

import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Web 0.2import Ubuntu.Components.Popups 1.0/*!    \brief MainView with a Label and Button elements.*/MainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "webviewdialog.liu-xiao-guo"    /*     This property enables the application to change orientation     when the device is rotated. The default is false.    */    //automaticOrientation: true    // Removes the old toolbar and enables new features of the new header.    useDeprecatedToolbar: false    width: units.gu(60)    height: units.gu(85)    Page {        title: i18n.tr("webviewdialog")        Component {            id: confirmDlg            Dialog {                title: i18n.tr("JavaScript Confirmation")                Button {                    text: i18n.tr("OK")                    onClicked: model.accept()                }                Button {                    text: i18n.tr("Cancel")                    onClicked: model.reject()                }                Component.onCompleted: show()            }        }        Component {            id: alertDlg            Dialog {                title: model.message                Button {                    text: i18n.tr("OK")                    onClicked: model.accept()                }                Component.onCompleted: show()            }        }        Component {            id: promptDlg            Dialog {                TextField {                    id: input                    text: model.defaultValue                    onAccepted: model.accept(input.text)                }                Button {                    text: i18n.tr("OK")                    color: "green"                    onClicked: model.accept(input.text)                }                Button {                    text: i18n.tr("Cancel")                    color: UbuntuColors.coolGrey                    onClicked: model.reject()                }                Binding {                    target: model                    property: "currentValue"                    value: input.text                }                Component.onCompleted: show()            }        }        WebView {            anchors.fill: parent            url: "www/index.html"            confirmDialog: confirmDlg            alertDialog: alertDlg            promptDialog: promptDlg        }    }}

在这里，我们对alertDialog及confirmDialog进行了初始化，这样当我们在index.html中使用alert及confirm时，我们可以得到我们需要的Dialog:

整个项目的源码在：https://github.com/liu-xiao-guo/webviewdialog

0 0