How to Invoke a JS function on a JS object from native code

[ahmed-salem-me]

How can web code return a js object to native code which native code can later use to invoke a function of the js object?
Ex.
var obj = newObject();
var obj.DoSomething = function (){};
function GetObject() {
return obj;
}

var tmp = {NativeCode}.ExecuteJavascript("GetObject()");

tmp.{SomeHow}.Call(DoSomething());

[jasonstephen15]

Simply post message from web side code and add an event handler in native code. Then you can execute script based on the message. See ex. https://docs.microsoft.com/en-us/microsoft-edge/webview2/how-to/communicate-btwn-web-native#round-trip-messages.

Let me know if this doesn't work for your scenario.

[ahmed-salem-me]

Simply post message from web side code and add an event handler in native code. Then you can execute script based on the message. See ex. https://docs.microsoft.com/en-us/microsoft-edge/webview2/how-to/communicate-btwn-web-native#round-trip-messages.

Let me know if this doesn't work for your scenario.

@jasonstephen15 , Thanks but that's not really what I'm asking about it, what I want is be able to call a function on a JS object.
another example , let say I already have a function that returns an element
Web code:
function getElement(id) { return document.getElementById(id); }
Native code:
var ele = webView2.ExecuteScriptAsync("getElement(id)")
then be able to do something like
ele.callWebFunction("focus()") Or
ele.focus()
where focus is web function on ele
Or somehow
ele.style.width='4'

[ahmed-salem-me]

By the way, I don't understand why Microsoft chooses to make webView examples in c++, which is not really the most used language at the moment, by far c# is. and much more readable

[ahmed-salem-me]

@jasonstephen15 , Please check this interface in MS Blazor, which does very similar to what I'm talking about
https://docs.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.ijsobjectreference

[jasonstephen15]

@ahmed-salem-me - We currently don't have a way to project JS objects into your native language. I believe Blazor is only C#/.NET whereas WebView2 has multiple language/platform support. This would probably be costly for us to build as we'd have to handle multiple native language/interface projections. I do agree it might be slightly easier to have a native proxy for the js object. Although I don't know if I see a functionality gap. Do you mind explaining if there is some feature/scenario gap you can't accomplish with ExecuteScript? In your example above, would webView2.ExecuteScriptAsync("getElement(id).focus()") not meet your needs?

[ahmed-salem-me]

@jasonstephen15 , the main difference is that you can pass the object around, so you can call its functions later or set its attributes.
A similar product to WebView2, the DotNetBrowser, allows this by providing a class called JSValue, which has methods like jsV.AsObject().SetProperty, and jsV.AsFunction().Invoke.

It's not that you project the entire JS object into native code as it is, but rather some kind of reference to it, that allow for future operations on that object, called from native and executed on the web-side