Call .NET from JavaScript using CefGlue / CEF3 - javascript

There is an existing solution for CefGlue: Call .Net from javascript in CefSharp 1 - wpf
I want exactly this, but for CefGlue: I want to communicate with the App using JavaScript. So when I click a button in my HTML site, I want the application to handle this (for example: start a tcp server).
I tried to register an own CefV8Handler but without success, the Execute function on the handler is never called. Here is what I do right now
protected override void OnWebKitInitialized()
{
Console.WriteLine("Registering testy extension");
Xilium.CefGlue.CefRuntime.RegisterExtension("testy", "var testy;if (!testy)testy = {};(function() {testy.hello = function() {};})();", new V8Handler());
base.OnWebKitInitialized();
}
My V8Handler code looks as follows:
public class V8Handler : Xilium.CefGlue.CefV8Handler
{
protected override bool Execute(string name, CefV8Value obj, CefV8Value[] arguments, out CefV8Value returnValue, out string exception)
{
if (name == "testy")
Console.WriteLine("CALLED TESTY");
else
Console.WriteLine("CALLED SOMETHING WEIRED ({0})", name);
returnValue = CefV8Value.CreateNull();
exception = null;
return true;
}
}
I'm in multiprocess mode, no console window shows "CALLED TESTY" nor "CALLED SOMETHING WEIRED".

Found a solution for that. The trick is to create a CefV8Value (CreateFunction) and assign it to a V8Handler. Then assign this value to the global context. This is what it looks like:
internal class RenderProcessHandler : CefRenderProcessHandler
{
protected override void OnContextCreated(CefBrowser browser, CefFrame frame, CefV8Context context)
{
CefV8Value global = context.GetGlobal();
CefV8Value func = CefV8Value.CreateFunction("magic", new V8Handler());
global.SetValue("magic", func, CefV8PropertyAttribute.None);
base.OnContextCreated(browser, frame, context);
}
}
Another problem came up: it was called in the renderer process, but I required the callback in the browser process. In the CefV8Handlers execute function i did this:
var browser = CefV8Context.GetCurrentContext().GetBrowser();
browser.SendProcessMessage(CefProcessId.Browser, CefProcessMessage.Create("ipc-js." + name));
This way I can retrive the message in the OnProcessMessageReceived function in the CefClient implementation.

Related

Vaadin flow javascript to Java call

Following this tutorial https://vaadin.com/blog/calling-java-from-javascript I'm trying to call a Java function from javascript but that doesn't seem to work as expected.
I'm having a View that contains a button which, on its onClick handler, triggers a call to a Javascript function, which works as expected.
The problem I'm having is that the getElement() that I`m passing to the javascript function is undefined when it reaches the javascript side of things.
My code looks as follows:
#JavaScript("./js/script.js")
public class RouteGraphicsView extends Div {
....
Button b = new Button("Test Button");
b.addClickListener(new ComponentEventListener<ClickEvent<Button>>() {
private static final long serialVersionUID = 1L;
#Override
public void onComponentEvent(final ClickEvent<Button> event) {
UI.getCurrent().getPage().executeJs("greet($0, $1)", "test name", UI.getCurrent().getElement());
}
});
....
}
The above call reaches the script.js file which looks like this
window.greet = function greet(name, element) {
console.log("Hello, I am greeting you, " + name);
try {
console.log("Element ", element);
console.log("Logging 1", element.$server);
} catch (e) {
console.log(e);
}
}
The output shown by the greet function above is
Hello, I am greeting you, test name
vaadin-bundle-62ac8b…b56c6.cache.js:4813 Element
vaadin-bundle-62ac8b…b56c6.cache.js:4813 Logging 1 undefined
Since the element.$server is undefined I can not get the javascript function to call my greet function in the View, which is annotated with #ClientCallable
#ClientCallable
public void greet(final String name) {
System.out.println("Called from JavaScript: " + name + " \n\n\n");
}
I've tried various other ways of calling the script.js, like using button's element to invoke the executeJs function or passing the button's element (b.getElement()) as an argument to the function but to no avail.
What am I doing wrong ?
You're doing element.$server on the element that you passed as UI.getCurrent().getElement(). This corresponds to the UI instance and not an instance of the RouteGraphicsView class that (I assume) has the #ClientCallable method. Using the button would also not work for the same reason.
You should pass an instance of the view, which in your case needs to be written as RouteGraphicsView.this because of the way the regular this refers to the click listener.

Assigning callback events from an array of strings (PIXI.js)

all. I have kind of a doozy of a problem, that could be solved really simply, if I just wanted to duplicate the code. I mean, really, it's a small part of a project that I'm doing just to see if I can, more than anything else, but it is bothering me since I've thought it up.
The Project
For fun, I've decided to take someone's ActionScript 3, text-based game engine and convert it to TypeScript and ultimately JavaScript using PixiJS.
The thing is, there are still 20213 errors to be fixed running tsc, so I could just leave this to a later date. But I was working on the Button class, which they defined as a subclass of MovieClip. That's fine; I just responded by reading up on PIXI buttons, and they seem fairly straightforward. Just, in the button's constructor, add something akin to the following lines:
export class Button extends PIXI.Sprite {
private _callback : Function;
private _height : number;
private _width : number;
public get callback() : Function { return this._callback; }
public set callback(fn : Function) {this._callback = fn; }
public get height() : number { return this._height; }
public set height(h : number) {this._height = h; }
public get width() : number {return this._width; }
public set width(w : number) {this._width = w; }
public constructor(width = 180, height = 90, callback: Function = null){
super(new PIXI.Texture(new PIXI.BaseTexture(GLOBAL.BTN_BACK, PIXI.SCALE_MODES.NEAREST)));
this.callback = callback;
this.width = width;
this.height = height;
this.buttonMode = true;
this.interactive = true;
this.anchor.set(0.5);
this.on('mousedown', this.callback)
.on('touchstart', this.callback);
}
}
That's a bit of a simplified version, and the version I did on Codepen uses a Container and a private _sprite field instead (as well as a ColorMatrixFilter that doesn't work too well on the black icons I picked out, but that's not really important for this question), but that's roughly the gist of how it's done.
The Problem
The problem is that, in the codepen, I'd like to do the following:
// assign `this.callback` to each of the following events:
let that = this;
['click','mousedown','touchstart'].map(evt => that.on(evt, that.callback});
with a simple call being passed in their constructors elsewhere:
for (let n = 0; n < 5; ++n){
btnArray.push(new Button(16, 16, () => console.info('You pushed button %d', n)));
}
but I'm not getting anything from them, even in the Chrome Console. I even logged that ColorMatrixFilter I mentioned earlier, to see if it was console.info that was wrong. Nope. So now, I'm confused on that. I was hoping to be able to just make a GLOBAL (a legacy static object from the AS source) key to iterate through for the events, but it looks like that's not happening.
The Questions
Is what I'm trying to do feasible, if odd? Is it blocked by a security feature (for which I'd be grateful)? If not, what am I doing wrong?
Should I even worry about setting all these different event handlers, or is just listening to click enough?
When an arrow function like your event map is executed the this context is not set, so any code that references this is going to get the current value, including any functions your map calls.
Replace your event map with the following:
['click','mousedown','touchstart'].map(function(evt) { that.on(evt, that.callback} } );
A demonstration:
function Named(x) {
this.name = x;
}
var foo = new Named("foo");
var bar = new Named("bar");
var showFunc = function show() {
// this is context dependant
console.log(this.name);
}
var showArrow;
// this is the window
showArrow = () => console.log(this.name);
var fooShowArrow;
(function() {
// this is foo
that = this;
fooShowArrow = () => console.log(that.name);
}).apply(foo);
var example = function(func) {
// For the demo, at this point, this will always be bar
func.apply(this, [ "arbitrary value" ]);
}
// explicitly set the current "this" to bar for the execution of these functions
example.apply(bar, [showFunc]); // works
example.apply(bar, [showArrow]); // fails, this is still the window
example.apply(bar, [fooShowArrow]); // fails, this is still foo

Passing Geolocation from Swift 2 ViewController to Javascript Method

The code below is able to get the geolocation and prints it out. I got this based on some tutorials online and looking at Swift Documents. I want to pass geolocations in the form of Strings from Swift 2 to Javascript. I am able to get the GeoLocations, I do not know how to pass these Strings to my Javascript Code in the Webview.
Below is the Code I have:
#IBOutlet weak var Webview: UIWebView!
let locMgr = CLLocationManager()
override func viewDidLoad() {
super.viewDidLoad()
loadAddressURL()
locMgr.desiredAccuracy = kCLLocationAccuracyBest
locMgr.requestWhenInUseAuthorization()
locMgr.startUpdatingLocation()
locMgr.delegate = self //necessary
}
func locationManager(manager: CLLocationManager , didUpdateLocations locations: [CLLocation]){
let myCurrentLoc = locations[locations.count-1]
var myCurrentLocLat:String = "\(myCurrentLoc.coordinate.latitude)"
var myCurrentLocLon:String = "\(myCurrentLoc.coordinate.longitude)"
print(myCurrentLocLat)
print(myCurrentLocLon)
//pass to javascript here by calling setIOSNativeAppLocation
}
I have javascript on my website with this method:
function setIOSNativeAppLocation(lat , lon){
nativeAppLat = lat;
nativeAppLon = lon;
alert(nativeAppLat);
alert(nativeAppLon);
}
I have looked at another question labelled Pass variable from Swift to Javascript with the following solution:
func sendSomething(stringToSend : String) {
appController?.evaluateInJavaScriptContext({ (context) -> Void in
//Get a reference to the "myJSFunction" method that you've implemented in JavaScript
let myJSFunction = evaluation.objectForKeyedSubscript("myJSFunction")
//Call your JavaScript method with an array of arguments
myJSFunction.callWithArguments([stringToSend])
}, completion: { (evaluated) -> Void in
print("we have completed: \(evaluated)")
})
}
However I have no appDelegate, and I want to directly from this view make these changes. So I get a "use of unresolved identifier appDelegate".
You have to implement UIWebview delegate.Javascript function should call after webviewDidFinishLoad.
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let url = NSURL (string: URLSTRING);
let requestObj = NSURLRequest(URL: url!);
webView.delegate = self
webView.loadRequest(requestObj);
}
func webViewDidFinishLoad(webView: UIWebView) {
let javaScriptStr = "setIOSNativeAppLocation(\(myCurrentLoc.coordinate.latitude), \(myCurrentLoc.coordinate.longitude))"
webView.stringByEvaluatingJavaScriptFromString(javaScriptStr)
}
The answer you link to is for Apple TV, which is very different to iOS & UIWebView.
Before you try to run any javascript you need to be sure that the web view has finished loading (see webViewDidFinishLoad).
When the web view is ready and you have your details you can create a String which contains the javascript you want to execute and then pass that to the web view:
let javaScript = "setIOSNativeAppLocation(\(myCurrentLoc.coordinate.latitude), \(myCurrentLoc.coordinate.longitude))"
webView.stringByEvaluatingJavaScriptFromString(javaScript)

"TypeError: undefined is not an object" when calling JS function from Swift in tvOS app

I am getting an error when calling a JS function from Swift in a tvOS app that has me stumped.
I have set up functions to call Swift from JS that work fine, but when trying to call a JS function from Swift I get the below error in the Safari debugger:
TypeError: undefined is not an object
(anonymous function)
JSValueToObject
-[JSValue callWithArguments:]
_TFFC13tvOSShortGame11AppDelegate17callPlayVideoInJSFS0_FSST_U_FCSo9JSContextT_
_TTRXFo_oCSo9JSContext_dT__XFdCb_dS__dT__
-[IKAppContext _doEvaluate:]
-[IKAppContext _evaluate:]
__41-[IKAppContext evaluate:completionBlock:]_block_invoke
-[IKAppContext _sourcePerform]
IKRunLoopSourcePerformCallBack
__CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__
__CFRunLoopDoSources0
__CFRunLoopRun
CFRunLoopRunSpecific
CFRunLoopRun
-[IKAppContext _jsThreadMain]
__NSThread__start__
_pthread_body
_pthread_body
thread_start
The relevant swift code is below:
//From JS to Swift
//call this method once after setting up your appController.
func createGetVimeoURL(){
//allows us to access the javascript context
appController?.evaluateInJavaScriptContext({(evaluation: JSContext) -> Void in
//this is the block that will be called when javascript calls getVimeoURL(str)
let getVimeoURL : #convention(block) (String) -> Void = {
(videoName : String) -> Void in
//5. return the vimeo url to the JS code for the passed in videoName
self.getTempVimeoURL(videoName)
}
//this creates a function in the javascript context called "getVimeoURL".
//calling getVimeoURL(str) in javascript will call the block we created above.
evaluation.setObject(unsafeBitCast(getVimeoURL, AnyObject.self), forKeyedSubscript: "getVimeoURL")
}, completion: {(Bool) -> Void in
//evaluation block finished running
})
}
//From Swift to JS
//when callPlayVideoInJS() is called, playVideo(url) will be called in JavaScript.
func callPlayVideoInJS(url : String){
//allows us to access the javascript context
appController!.evaluateInJavaScriptContext({(evaluation: JSContext) -> Void in
//get a handle on the "playVideo" method that you've implemented in JavaScript
let playVideo = evaluation.objectForKeyedSubscript("playVideo")
//Call your JavaScript method with an array of arguments
playVideo.callWithArguments([url])
}, completion: {(Bool) -> Void in
//evaluation block finished running
})
}
//4. getTempVimeoURL from videoName
func getTempVimeoURL (videoName : String) -> String {
return "http://techslides.com/demos/sample-videos/small.mp4"
}
And the javascript function that should get called by swift (which I create manually):
playVideo: function (url) {
if(url) {
//2
var player = new Player();
var playlist = new Playlist();
var mediaItem = new MediaItem("video", url);
player.playlist = playlist;
player.playlist.push(mediaItem);
player.present();
}
}
The getVimeoURL javascript function is created when I call createGetVimeoURL in appController didFinishLaunchingWithOptions.
But I can't work out why I get the javascript error when I call callPlayVideoInJS, but it is probably something simple!
Any help appreciated.
It looks like you aren't accessing the appropriate JS method using objectForKeyedSubscript
Change
let playVideo = evaluation.objectForKeyedSubscript("vimeoVideoURL")
to
let playVideo = evaluation.objectForKeyedSubscript("playVideo")
[UPDATE]
You also need to make sure your playVideo method is accessible from the appropriate context and scope. Try putting your playVideo method in application.js:
var playVideo = function (url) {
...

Handling JavaScript exceptions from Silverlight

I'm having trouble adding proper exception handling to existing code that makes heavy use of Silverlight - JavaScript interoperability. In this case, my JavaScript can throw an exception that I want to handle meaningfully in Silverlight.
From Silverlight, I'm creating an instance of a JavaScript object, then later I'm calling a method on that object:
public class MyWrapper
{
dynamic _myJSObject;
public MyWrapper()
{
_myJSObject = HtmlPage.Window.CreateInstance("MyJSObject");
}
public int MyMethod()
{
try
{
int result = (int)_myJSObject.MyMethod();
}
catch (Exception ex)
{
// I want to add meaningful exception handling here
}
}
}
Whenever MyJSObject.MyMethod throws an exception, there are two problems:
The browser shows a message that an exception has occurred.
Information about the exception is not passed to my managed code. Instead I get a RuntimeBinderException which just says "Cannot invoke a non-delegate type" and contains no other information whatsoever. This does not seem to match what is described here; I'd expect an InvalidOperationException.
I've tried avoiding to cast the returned value of the method:
object tmp= _myJSObject.MyMethod();
This makes no difference. Changing the type of exception thrown on the JavaScript side has no effect either.
MyJSObject.prototype.MyMethod = function ()
{
throw "Hello Silverlight!";
}
The only solution I can think of right now is abusing the function's return value to pass information about the exception, but that will make my code a whole lot uglier... so:
Why is the behavior I'm seeing different from what is described in documentation? Does it have to do with my use of dynamic somehow? How can I properly handle exceptions that occur in JavaScript in my managed code?
After quite a bit of experimentation, I concluded that there is no way to directly handle the JavaScript exception from Silverlight. In order to be able to process the exception, the JavaScript code needs to be changed slightly.
Instead of throwing the error, I return it:
function MyMethod()
{
try
{
// Possible exception here
}
catch (ex)
{
return new Error(ex);
}
}
Then on the Silverlight side, I use a wrapper around ScriptObject to turn the return value into an exception again. The key here is the TryInvokeMember method:
public class ScriptObjectWrapper : DynamicObject
{
private ScriptObject _scriptObject;
public ScriptObjectWrapper(ScriptObject scriptObject)
{
_scriptObject = scriptObject;
}
public override bool TryInvokeMember(InvokeMemberBinder binder, object[] args, out object result)
{
result = _scriptObject.Invoke(binder.Name, args);
ScriptObject s = result as ScriptObject;
if (s != null)
{
// The JavaScript Error object defines name and message properties.
string name = s.GetProperty("name") as string;
string message = s.GetProperty("message") as string;
if (name != null && message != null && name.EndsWith("Error"))
{
// Customize this to throw a more specific exception type
// that also exposed the name property.
throw new Exception(message);
}
}
return true;
}
public override bool TrySetMember(SetMemberBinder binder, object value)
{
try
{
_scriptObject.SetProperty(binder.Name, value);
return true;
}
catch
{
return false;
}
}
public override bool TryGetMember(GetMemberBinder binder, out object result)
{
try
{
result = _scriptObject.GetProperty(binder.Name);
return true;
}
catch
{
result = null;
return false;
}
}
}
Potentially you could improve this wrapper so it actually injects the JavaScript try-catch mechanism transparently, however in my case I had direct control over the JavaScript source code, so there was no need to do this.
Instead of using the built in JavaScript Error object, it's possible to use your custom objects, as long as the name property ends with Error.
To use the wrapper, the original code would change to:
public MyWrapper()
{
_myJSObject = new ScriptObjectWrapper(
HtmlPage.Window.CreateInstance("MyJSObject"));
}

Categories