Is there any way QML can load data using Facebook Javascript SDK? - facebook

Question

I am trying to get QML to interact with FB graph API using FB Javascript SDK.
I'm loading this HTML inside a WebView element:
html: "<script>console.log(\"This is in WebKit!\"); window.FB.init();</script>"
and I've also created a JS Window Object named FB inside the WebView:
javaScriptWindowObjects: QtObject {
WebView.windowObjectName: "FB"
}
But as soon as the window.FB.init() is called, it throws out an error:
ReferenceError: Can't find variable: window
Another approach I'm using is load the FB.init() function using Component.onComplete
function startupFunction() {
console.log("This call is in QML!");
FB.init({
appId:'XXXXXXXXXXXXX', cookie:true,
status:true
});
console.log(FB);
}
Component.onCompleted: startupFunction();
But I get the error as :
TypeError: Result of expression 'FB.init' [undefined] is not a function
Here is the complete QML:
import QtQuick 1.0
import "fb.js" as FB
import QtWebKit 1.0
Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
}
WebView {
preferredWidth: 490
preferredHeight: 400
scale: 0.5
smooth: false
javaScriptWindowObjects: QtObject {
WebView.windowObjectName: "FB"
}
html: "<script>console.log(\"This is in WebKit!\"); window.FB.init();</script>"
function startupFunction() {
console.log("This call is in QML!");
FB.init({
appId:'xxxxxxxxxxxx', cookie:true,
status:true
});
console.log(FB);
}
Component.onCompleted: startupFunction();
}
}

Answer 1

I think the problem is that you are not defining anything in your window-object, your QtObject just contains the windowObjectName but no functions or vars. windowObjectName is really just the name for the new object, qml does not use the "fb.js"-import for that object.
According to the docs it's supposed to look like this:
WebView {
javaScriptWindowObjects: QtObject {
WebView.windowObjectName: "FB"
// the stuff you want in that window-object goes here:
function init() {
console.log("FB.init");
}
}
}