is there a way to provide a global JavaScript function in an Angular App, which can be called by non-Angular JS code?
Background: Our Angular app is running inside a webview of a Qt application. Now we are investigating possibilities to provide an API, so that the Qt application can call functions of the Angular app.
Any front-end javascript code (including Angular) has access to global objects window and document. You can add any function or property into those 2.
window.myAPI = {
doIt: function () {...},
doItBetter: function () {...}
}
I'm not familiar with QT WebView, so I can not help you to understand if you can get access window or document from the QT code. I would rather expect you can.
As another solution - https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage. Don't know if QT code can react to those messages.
Related
I am developing a website using Javascript for a device which has a particular Javascript library that can be used. This Javascript library is known on the device but it is not known locally. F.e. I execute library.function(). For this, locally I get the error: library is not defined.
Is there a way to avoid this error locally so that I can test those parts without commenting it out? To mock the libraries that are unknown locally.
Is this a global scoped library? If yes, you can substitute it and mock the behaviour:
var MockLib = {
someFunction: () => console.log("someFunction called"),
someOtherFunc: (args) => console.log("someOtherFunc called", args),
someProp: "value-123",
};
window.library = window.library || MockLib;
Then, executing library.someFunction() will execute the function on the library if it was already defined or your mock if not.
Just make sure to put the window.library assignment AFTER the library should have been loaded.
I am new in angular 4. I am trying to add recaptcha on my page without using other node_modules.
HTML
<div class="g-recaptcha" data-callback="onCaptchaComplete" data-sitekey="xxxxxxxxxxxx"></div>
TS
private onCaptchaComplete(response: any) {
console.log('reCAPTCHA response recieved:');
console.log(response.success);
console.log(response.token);
}
But i am getting ReCAPTCHA couldn't find user-provided function: onCaptchaComplete Please help me where is my mistake.
Thanks.
Your function is inside a class, which means that's it not a global function (window.onCaptchaComplete) as you've stated in data-callback.
You'll need to have it globally declared for your current approach to work. You could do this in main.ts, for example. Beware of the optimizers though which might minimize function names: configure them correctly for this function is you're using such a tool.
In general, it's not a good approach to use a module which relies on global functions when you're using Angular -- you kinda lose the whole point of Angular. I suggest you try finding a different module, maybe even some already prepared for Angular.
I am building a Cordova application for all major operating systems (iOS, macOS, Android and Windows).
I wrote a native Plugin (WinRT) in C++/CLI to call some native functions, this Plugin uses delegates to asynchronously give back results.
I also wrote a test application in C# that allows me to easily test the C++/CLI code without having to compile the whole Cordova project.
I am able to bind to the C++/CLI delegate without any issue in C#, but I am not able to do so in Javascript.
C# Way (Works like a charm):
myCppClass.log += (string logString) =>
{
Debug.WriteLine(logString);
};
Javascript Way (Does not work at all):
myCppClass.addEventListener("log", function (msg) {
console.log(msg);
});
I got the Javascript way from: https://msdn.microsoft.com/en-us/library/hh779077.aspx
Does anyone know how to bind to C++/CLI delegates in Javascript?
Thanks
Take a look once again on the https://msdn.microsoft.com/en-us/library/hh779077.aspx#Anchor_4 sample.
Have you tried this way?
var instance = new MyCppClass();
instance.addEventListener("log", function (e) {
console.log(e.msg);
});
I am trying to use cefSharp for a WPF application. I can find "how to call a Javascript methods from .Net. But is there a way where I can get notified for Javascript functions or events in .Net?
e.g. if there is a Javascript function (with and without param) I can get the notification with or without values in .Net.
In short, YES!
There's bindings available for:
c# -> js use
webBrowser.ExecuteScriptAsync(script);
js -> c# use
webBrowser.RegisterJsObject(A_NAME_FROM_JS,
objectToBind);
Then from js you can call:
window.A_NAME_FROM_JS.MethodOnObj()
and this will invoke the
MethodOnObj()
on the passed
objectToBind
It works like a charm. Let me know if you've an issue and I'll help further!
The RegisterJsObject and ExecuteScriptAsync methods are both deprecated now. I found another solution that CefSharp supports here:
https://github.com/cefsharp/CefSharp/wiki/Frequently-asked-questions#JSEvent
More detailed information is here:
https://github.com/cefsharp/CefSharp/issues/2775#issuecomment-498454221
Essentially, from your javascript code on page, you can call:
CefSharp.PostMessage(someDataYouWantToPassBack)
And in C#, you register the event to your browser:
browser.JavascriptMessageReceived += OnBrowserJavascriptMessageReceived;
private void OnBrowserJavascriptMessageReceived(object sender, JavascriptMessageReceivedEventArgs e) { }
I have created an application in HTML5 and javascript that obviously will run in any browser, but it also can be loaded into another software (other.app) that uses its' functionalities.
I need to create a condition so when my app is loaded in a browser, it will not execute the functions that are referring to other.app.
Example:
function doStuff(){
if(isOtherApp){
doOtherAppFunction();
}
doAllOtherStuff();
}
Is there a way in javascript to find out what application loaded and is execution my application?
Hope this is clear enough. Thanks in advance for any suggestions.
There isn't a reliable way, but you can check a property provided by the JavaScript engine and test if it exists or has a certain value.
If your application is providing extra JavaScript methods and you only want to call them if they exist, then you can just test for their existence:
if (window.nonStandardFeature) {
window.nonStandardFeature();
}