up vote 2 down vote favorite

I'm Looking for an oxide equivalence to this QtWebKit Function:

WebView.experimental.evaluateJavaScript()

Or WebKitGtk 

WebView.execute_script()

I'm having problems to find documentation about oxide. This article has good information but is not exactly what I'm trying to do: http://daker.me/2014/05/how-to-use-oxide-in-your-ubuntu-qml-application.html

share|improve this question
    
As far as I can tell, there is no direct equivalent available. I've filed a feature request here: bugs.launchpad.net/webbrowser-app/+bug/1339442 – Robert Schroll Jul 9 '14 at 2:16
    
Good idea. I've seen the bug report, by now has been flagged as invalid, but there seems to be no way to execute JavaScript code in the way you can do it with: qtwebkit's experimental.evaluateJavascript or to webkitgtk's execute_script, I mean that allows you access to the JavaScript objects running in the webkit instance, or execute code in the same JavaScript space running in webkit. – J.Serra Jul 9 '14 at 10:02
    
Robert Schroll: I've tested what you propose in the bug report, It works, Thank you very much!... May be you want to post it here as an answer. Regards. – J.Serra Jul 11 '14 at 18:09
up vote 4 down vote accepted

There's no built-in equivalent, but you can reproduce this behavior by setting up a message handler in a user script that triggers an event in the DOM that you handle in the HTML document. For each of these steps, the code to be executed is passed along. For a simple example:

oxide-test.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');")
    }
}

oxide-user.js

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

oxide-test.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>

(Note that if all you're trying to do is manipulate the DOM, you can do so from within the user script.)

This code doesn't allow you to get the result of the execution. You may be able to pass a callback in, but I suspect this won't actually work. Instead, you'll need to set up a parallel messaging chain to get the result back to the QML context.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.