How to run js code immediately after injection

[erjdriver]

I'd like to run my js code right after injecting into a remote html page.

I've got the following and it seems to work.

is this the best way???

I don't think I'm handling the promise returned by loadJavascriptFile properly.

How about error handling?

    webview.on(WebViewExt.loadFinishedEvent, (args: LoadFinishedEventData) => {
        console.log(`WebViewExt.loadFinishedEvent: ${args.url}`);

            webview.loadJavaScriptFile( "browse.js", "~/assets-js/browse.js" ).then( async value =>
                {
                    await executeJavaScriptTest( "start()" );

                } );

        }

[m-abs]

That should work. But you might not have bundled the JavaScript-file with your app. The assets-js-folder isn't bundle by default, but assets are.

If you need it to load after each page-load. I recommend using autoLoadJavaScriptFile(resourceName: string, filepath: string) instead. This registers a JavaScript to be loaded on each loadFinished and uses a better technology on iOS (a WKUserScript).

[erjdriver]

I looked at one of your previous closed q&a and added the folder to the bundle - thanks.

In the loadJavaScriptFile - what's the reason for the first parameter - the name - the path has the filename also???

I plan to inject a different file depending on the url that was just loaded.

To use autoLoadJavaScriptFile - do I have to register it first?

Can you give an example for registration and also autoLoadJavaScriptFile - how and when one would do it?

Appreciate this extension - it seems to be working out well.

[m-abs]

In the loadJavaScriptFile - what's the reason for the first parameter - the name - the path has the filename also???

Under the hood, the script is registered as a resource with registerLocalResource(name, path) and is loaded via the custom-scheme x-local:// inside the webview.

If the name is browser and the file path is ~/assets/browser.js, the url x-local://browser will give you the ~/assets/browser.js inside the webview. This is to get about path restrictions and cors problems.

To use autoLoadJavaScriptFile - do I have to register it first?

(We use angular, so that's the example you're getting)

In the template used the loaded-event.

<WebViewExt (loaded)="onWebViewLoaded($event)"></WebViewExt>

In typescript handle the event.

public onWebViewLoaded(event) {
    const webview = event.object as WebViewExt;
    webview.autoLoadJavaScriptFile('browser', '~/assets/browser.js'); // <-- This should make the script load on loadFinished.
    webview.src = 'http://URL';
}

[meightythree]

@m-abs Is there an event inside webview that I can add an event listener for this autoLoadJavaScriptFile function has loaded the js?

Can I do something similar to this?

document.addEventListener('my-ns-js-loaded', function () { /* I can use the JS here I just loaded with autoLoadJavaScriptFile() */ });

[m-abs]

@m-abs Is there an event inside webview that I can add an event listener for this autoLoadJavaScriptFile function has loaded the js?

No, we don't have an event for that.