Hook IIFE (self-calling) javascript functions

Question

I'm wanting to hook IIFE functions:

(function(p) {
   // stuff
})();

I ask this in general sense, though the specific reason is that WordPress plugins often drop inline scripts right into the body output. If you want to defer (async) load dependencies for SEO reasons, it naturally fails.

In an effort to fix endless poor coding practices by plugin providers, and plugins that simply aren't designed with asynchronous loading in mind, I want to do such a thing.

I'm trying to avoid:

Modifying vendor code directly.
Parsing raw content using PHP.
Blocking existing server-side systems of loading JavaScript resources, in order to appropriately load them later.

I'm wondering if there is some extremely low level prototype in the browser dom that can be used to intercept functions of that nature?

FYI, this is called an IIFE (immediately invoked function expression) — James Monger
– James Monger, Commented Aug 17, 2016 at 16:00
Unfortunately, the answer is a simple "no," there are no low-level hooks in the browser for that. What exactly would you do if you had that ability? It'd be more productive if you specified exactly what you're trying to do, and there may be a better approach to the problem. — Jacob
– Jacob, Commented Aug 17, 2016 at 16:08
If you wrote a hook that modifies external script tags dropped by plugins, you will want to write a hook that also modifies inline script tags. — Bergi
– Bergi, Commented Aug 17, 2016 at 16:19
"fix plugins that simply aren't designed with asynchronous loading in mind" - that'll be very hard. They might use document.write or whatnot. — Bergi
– Bergi, Commented Aug 17, 2016 at 16:20

Community · Accepted Answer · 2017-05-23 12:32:49Z

So I ended up doing what I wanted to avoid. It's slightly dirty, but it works very well. I would share, but NDA. If possible I'll try to submit it as a pull request on one of the larger SEO/Caching plugins (likely Better Wordpress minify).

It scans the output buffer for problem scripts and styles, and adjusts them to be Google SEO compliant (non-blocking). I imagine this could never work for gen-pop, as the amount of poor coding in this world is endless, and I think the regex would become painfully bloated by the time all the use-cases were handled.

It relies on loadCSS and some form of native DocumentContentLoaded to be defined inline in the head, starts by forcing all sourced scripts to be deferred, cleans up javascript designed to be executed in it's own script tag, and moves the body scripts into a single function that can be called when the time is right. All with regex.

Here's some pointers for anyone interested in doing similar:

Shout out to all the comments and assistance provided here, wouldn't have even tried without speaking to you guys first. Appreciate the pointers and advice, see you next time!

Collectives™ on Stack Overflow

Hook IIFE (self-calling) javascript functions

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related