Angular 6 - call Angular function from external js file - javascript

Recently I'm rewriting a plan JS app with Angular 6.
The old stuff work like this:
file js inside a iframe that call "parent.update_track()" function defined into main.js file into iframe container.
that's not work in Angular when app run on production, the response is: TypeError: parent.update_track is not a function.
so how can I call this function "update_track()" declared into a ts file in a component from an external js file contained into iFrame?

You can use post message functionality.
So in your iframe you can just call the opener window (the parent) to post message, for more info you can use this reference
Then in the angular app (the parent) you can use the following listener:
#HostListener('window:message',['$event'])
onMessage(e) {
if (e.origin!="http://localhost:4200") {
return false;
}
alert('here i am');
}
}
Note: you should change the e.origin test to support both local env and production.

Related

VueJS not building due to Android Javascript webView callback

I would like to have a WebView page callback to my Android app. I have successfully done this using vanilla HTML page. When I add the same JavaScript code to my VueJS app, it does not want to build, and gives me an ELIFECYCLE error.
In my Kotlin code, I have the following:
binding.webView.addJavascriptInterface(JavaScriptInterface(), "Android")
private inner class JavaScriptInterface {
fun showWallet(string: String) {
AppPreference.PREFERENCE_SCREEN_TYPE = Constants.SCREEN_USER_DASHBOARD
mainActivity.getNavController().navigate(R.id.action_placeOrder_to_userDashboardFragment)
}
}
Android is my JavaScript object I've declared, and the function is showWallet, which navigates the user to another fragment.
In my VueJS code, I have the following:
let devicedUsed = this.$store.state.devicedUsed;
if (devicedUsed === 'apple'){
window.webkit.messageHandlers.message.postMessage('backToWallet');
}else{ //is Android device
Android.showWallet('backToWallet');
}
The above callback works without any issues in vanilla HTML. My problem is the above code does not build, and I get an error that Android is not defined. It seems VueJS is looking for Android, which is only defined in the Kotlin code.
How do I get around this problem?
Use the window. prefix to tell the compiler that it's a global variable:
// BEFORE:
Android.showWallet('backToWallet')
// AFTER:
window.Android.showWallet('backToWallet')

Dynamically add javascript functions to an Angular project

Let's say that I have an angular service, this service calls a servlet asking for a library.js file containing my custom JavaScript functions.
Is there any way I can dynamically add these functions to my Angular application at run-time?
For example, in the library.js file I might have the following custom function:
helloWorld(){
alert("hello world");
}
It should work as follows:
1) I call the servlet using the standard Angular module HttpClient
2) The servlet sends back library.js, containing a list of functions, like helloWorld();
3) The angular web applications loads the library.js file (how?)
4) I can then call the helloWorld() function in my angular code.
Ok, we were able to solve the problem in the following way:
1) The servlet answers with the following message, the script tags are MANDATORY, it won't be recognized as valid js code otherwise.
String servletAnswer = "<script type=\"text/javascript\">
function helloWorld(){
alert("custom message!");
}
</script>"
2) The angular application subscribes and waits for the servlet to answer in the usual way. As soon as i get the response i do:
var script = response;
$('body').append(script); /* i append the script to body of the document,
now the function helloWorld is available to the application */
3) I call the function using eval:
eval("helloWorld()");
I hope it helps! Thanks everybody

How do I add a personal script to an existing node.js library?

I have a local copy of the hls.js library and I need to include a personal script with custom functions in it.
How do I go about adding a new script to the library and how do I use the function written in the new script?
Let's say that I want to add a script called hello.js that contains a function that logs "Hello World".
When I call that function in my main.js I need it to execute.
Any ideas on how to do this?
Currently, I'm getting an error that the function is not defined.
I placed the hello.js script in the src folder of the library but this (as expected) doesn't seem to work.
It should be possible to add functions to the exported hls.js object.
Your custom-script.js:
var hls = require('hls.js')
hls.customFunc1 = function () {
}
hls.customFunc2 = function () {
}
on main.js:
require('custom-script')
// your code follows
Any other code would be able to use the custom functions by just require'ing hls.js.

meteor / javascript function not working when in another file

This is interesting.
I have a file structure as such:
/
/client/
/server/
The app I'm working on is working fine, I have many .js files in the /client/ folder, all separated into logical (to me) sections. They work fine when compiled.
I have added a new file though, called miscFunctions.js to the mix and added a simple function and saved:
function sessionDataReset(){
//Set the New Organisation Session data to be false, meaning we're not adding a new organisation
return Session.set('addingOrganisation', false);
};
This function, when called returns the following error:
Uncaught ReferenceError: sessionDataReset is not defined
When I move that exact code though to the .js file I'm calling it from it works fine.
Why is the error happening as I was of the understanding what I'm trying to do can be done with Meteor?
Any advice greatly appreciated.
Rob
First try declaring your file this way:
sessionDataReset = function() {
//Set the New Organisation Session data to be false,
//meaning we're not adding a new organisation
return Session.set('addingOrganisation', false);
};
This ensures the function will be visible globally.
(#user1623481 Meteor wraps files as IIFE's when it compiles them, creating a function scope that was limiting the visibility of this function.)
This will most likely resolve it, but following this check the file load order in the Meteor Docs

Sitecore SPEAK and Javascript

I am trying to replicate what is shown in this video series by Jakob:
I am able to get everything work except the custom Javascript part.
define(["sitecore"], function (Sitecore) {
var ListPage = Sitecore.Definitions.App.extend({
initialized: function () {
alert('Test');
}
});
return ListPage;
});
I even tried to fire Sitecore.app command in sc_debug mode but that is returning "undefined"
if your in Sitecore 7.5 or 8 the app has been moved to Sitecore.Speak.app rather than Sitecore.app
I believe you have to add a js script file to your Page Code control.
On the Page Code Control there is field called PageCodeScriptFileName you can add a path to your custom js file there. Then you can add your code above in that js file.
There's more info on this blog post from Martina:
http://mhwelander.net/2014/07/01/speak-for-newbies-part-4-pagecode-and-javascript-libraries/

Categories