☰

在 Oxide 中执行 Javascript 代码

tag-icon • tag-icon application-development ubuntu-touch qml webkit
在 Oxide 中执行 Javascript 代码

我正在寻找与此 QtWebKit 函数等效的氧化物：

WebView.experimental.evaluateJavaScript()

或者 WebKitGtk

WebView.execute_script()

我在查找有关氧化物的文档时遇到了问题。这篇文章提供了很好的信息，但并不是我想要的： http://daker.me/2014/05/how-to-use-oxide-in-your-ubuntu-qml-application.html

答案1

虽然没有内置的等效方法，但您可以通过在用户脚本中设置消息处理程序来重现此行为，该脚本会触发 DOM 中的事件，而您在 HTML 文档中会处理该事件。对于每个步骤，都会传递要执行的代码。举一个简单的例子：

氧化物测试.qml

import QtQuick 2.0
import Ubuntu.Components 0.1
import com.canonical.Oxide 1.0

Rectangle {
    width: units.gu(50)
    height: units.gu(75)
    // Both the UserScript and the call to sendMessage need to share the same
    // context, which should be in the form of a URL.  It doesn't seem to matter
    // what it is, though.
    property string usContext: "messaging://"

    WebView {
        id: webview
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
            bottom: button.top
        }
        context: webcontext
        url: Qt.resolvedUrl("oxide-test.html")

        function executeJavascript(code) {
            var req = rootFrame.sendMessage(usContext, "EXECUTE", {code: code});
        }
    }

    WebContext {
        id: webcontext
        userScripts: [
            UserScript {
                context: usContext
                url: Qt.resolvedUrl("oxide-user.js")
            }
        ]
    }

    Button {
        id: button
        anchors {
            bottom: parent.bottom
            left: parent.left
            right: parent.right
        }
        text: "Press Me"
        onClicked: webview.executeJavascript("exampleFunc('Hello');")
    }
}

氧化物-用户.js

oxide.addMessageHandler("EXECUTE", function (msg) {
    var event = new CustomEvent("ExecuteJavascript", {detail: msg.args.code});
    document.dispatchEvent(event);
});

氧化物-测试.html

<html>
<head>
<script>
    document.addEventListener("ExecuteJavascript", function (event) { eval(event.detail); });

    function exampleFunc(message) {
        document.body.innerHTML += "<p>" + message + "</p>";
    }
</script>
</head>

<body>
</body>
</html>

（请注意，如果您想要做的只是操作 DOM，那么您可以在用户脚本中进行操作。）

此代码不允许您获取执行结果。您可能能够传入回调，但我怀疑这实际上不起作用。相反，您需要设置并行消息链以将结果返回到 QML 上下文。

相关内容