Is there any way to load scripts in Wordpress asynchronously? - javascript

I looked through the Wordpress documentation and couldn't find any mention of async javascript loading using wp_enqueue_script(), is it possible at all? I have a couple of scripts and would rather async load them to improve the user loading experience!

You can use wp_enqueue_script() to load a "script loader", which is a script that loads other scripts. That way, you are loading the bootloader synchronously, but the others asynchronously.
Your script-loader could contain this:
var scriptUrls = [URLS_HERE];
scriptUrls.forEach(function(url,index,scriptUrls){
var script = document.createElement('script');
document.getElementsByTagName('head')[0].appendChild(script);
script.src = url;
});

Related

Chrome Extension imports/exports

I'm failing hard in trying to import/export functions from one file to another with a Chrome Extension. My problem is the following:
I have one script that's loaded as a content script from the manifest.js file. That script's name is script.js. In that script, I have a code like this to detect the URL of the webpage I've opened (in order to start my extension):
chrome.runtime.sendMessage({ command: 'currentTab' }, (tab) => { console.log('We're in.') });
Also, in the same script I have a function to attach two other scripts that I will use them as modules since they have export/import functions. These are: core.js and utils.js. The function is:
injectScript('extension.../modules/core.js');
injectScript('extension.../modules/utils.js');
function injectScript(scriptURL) {
const script = document.createElement('script');
script.setAttribute('type', 'module');
script.setAttribute('src', scriptURL);
const head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;
head.insertBefore(script, head.lastChild);
}
So, this first script.js sends a message to the background.js script in order to check for the tab URL and if everything's correct, I'll insert as modules my two other scripts.
Now, when I detect the URL of the website as OK, I would like to execute a function start() (which is in core.js) from this main script.js in order to execute everything from core.js that uses imported functions from utils.js.
I've also detected that if I inject my utils.js with the script.js it also injects it through the manifest.json. I'm really stuck in here guys. Could you give me a hand with this spaghetti mess?
Thank you!

Adding and Loading Javascript to a Browser via Javascript without reloading

I have a SWT Browser in an Eclipse RAP Application, where i load something on my local server and display that html.
the url looks something like this:
"http://localhost:port/......./myhtml.html"
I want to add script sources into my html without reloading the page. Currently i am doing this with a Javascript which i execute in the Browser.
var script = document.createElement('script');
script.setAttribute('src', 'SOMESOURCE');
document.head.appendChild(script);
This does work that i end up having the script tags correctly added to the HTML DOM, however it does not load the references, so i can't access anything defined in these script references. But calling something like
window.top.location.reload(false)
doesnt work either because this reloads the HTML and therefor removing my inital added script tags.
The main problem here is that i am very restricted because of the tecnologies we are using here, so i am only able to execute javascript queries in my browser.
PS:
For testing you just can open any Browser like Chrome and Firefox, open its Developer Toolkit and type that script into the console. The website doesn't matter.
Thanks for #JensV for helping me.
The Problem was although i added my script it didnt load its content. So what i was as described in the question.
However as mentioned from #JensV in the Bug
load scripts asynchronously
it is described to use a Promise object this would handle the load and error events.
function loadScript(src) {
return new Promise(function (resolve, reject) {
var s;
s = document.createElement('script');
s.src = src;
s.onload = resolve;
s.onerror = reject;
document.head.appendChild(s);
});
}
So what i did was first execute that Javascript and therefor adding this function, and then just execute it with the desired source.
Thanks for #JensV again, you might wanna flag this as duplicate, however i think my problem was a bit different then that.

Injecting Google recaptcha's JS file in a chrome extension's content.js

New to chrome extensions and have the following issue:
I am trying to display recaptcha in my content script. As you know, it needs to include this <script src="https://www.google.com/recaptcha/api.js" async defer></script> tag, and since content scripts run in an isolated environment, I cannot just add it via
const script = document.createElement('script');
script.src = 'https://...';
// ...and so on
This accepted answer, however, illustrates a great way of script injection into a content script, but only for local files. So is there any way to include a script from a CDN?
Try doing it this way:
var apiScript = document.createElement('script');
apiScript.setAttribute('src','insert source here');
document.head.appendChild(apiScript);

How did they hide the JavaScript on this page?

I encountered a webpage that shows a popup, however, the only related JavaScript code I found on that page is the code below. What exactly does this code do and how does it hide the actual implementation (showing the popup)?
<script language="javascript" type="text/javascript">
var script = document.createElement("script");
script.src = "/in.php?referer=" + escape(document.referrer);
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
This code only inject a <script> tag.
When you look in the Chrome dev tools, you'll see the file referenced here in the sources tab.
This javascript file will have this name: "/in.php?referer=" (and document.referrer as value to the query string).
There's really nothing hidden, it's just that this way the javascript file is loaded asynchronously and won't block further script from loading/executing. This technique is often used by third party in order to leave the smallest footprint possible (google maps, twitter, facebook SDK, youtube, etc, etc).

Dojo : load cross domain script dynamically and synchronously

I'm working on a project where i have to use dojo (i'm doing a custom widget) and the google map api (v3)
For some technical reason, i have to include the google map api through my js file and not through my html file, so i can't use
<script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places'></script>
The load have to be done synchronously.
I've tried some things, first adding the script using
document.write("<script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places'></script>");
But that's not working, i get a blank page instead, using firebug i can see that the panel "Network" is clearing and the page make an infinite loading of google map api script.
I think i can't do it using dojo.io.script (which allow to make cross domain request), because we can't make synchronous request with dojo.io.script
Any help will be appreciated ;)
Well, solution was to use google map callback :
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&callback=mapLoaded";
document.body.appendChild(script);
Then make the function "mapLoaded" which execute the code
Thanks for those who taked time to answer me
You should still be able to use dojo.io.script. It does not have to be synchronous. The maps API takes a c

Categories