Filter hook for modifying inline javascript

  • Resolved yankiara

    (@yankiara)


    3 years, 4 months ago

    Hi!
    First, congratulations for this great plugin!!!
    So far, this is the best optimization plugin I could test, even in its free version! Code is very well optimized but doesn’t break sites (I mean not too extreme like others…).

    I have a problem with some inline javascript, though, which prevents me from deferring jquery.js (or other dependancies).

    So I would like to replace some inline JS like this:
    document.addEventListener(“DOMContentLoaded”, function() { INLINE JS CODE });

    This way, it will be executed only when DOM is ready, and I can deferr JS dependancies.
    I know how to write PHP for this, but now I need to execute it at the right moment.

    Is there a filter hook I could use to filter html content output?
    I couldn’t find any documentation on this.

    Thanks in advance.

Viewing 3 replies - 1 through 3 (of 3 total)

  • @yankiara I’ll have to check this with our development team if there’s any hook/filter and get back to you is there’s any.

    Thank you for your time and patience.

    @yankiara Are you using inline javascript in HTML? or wp_add_inline_script

    If you are using inline Javascript in HTML then there is no filter, else if you are using wp_add_inline_script our development team can share a snippet with you that can work.

    Thread Starter yankiara

    (@yankiara)

    Hi,
    And thanks for your reply!

    It is actually inline JS from theme/plugins, so I have no control over it, that’s the problem ??

    But for those who are interested, in the meantime I wrote a little script that solves the problem in a rather brute way, filtering the whole html ouput to delay JS execution with DOMContentLoaded:

    
<?php

function callback($buffer) {
    preg_match_all( "/<script(?:[^>]*)>(?<content>[\s\S]*?)<\/script>/ims", $buffer, $matches, PREG_SET_ORDER );
	foreach ( $matches as $code ) {
		if ( strpos( $code['content'], 'jQuery(' ) === false ) {
			continue;
		}
		if ( strpos( $code['content'], 'DOMContentLoaded' ) !== false ) {
			continue;
		}
		if ( empty( $code['content'] ) ) {
			continue;
		}
		if ( preg_match( '/(application\/ld\+json)/i', $code[0] ) ) {
			continue;
		}

		$new_code = "<script>document.addEventListener('DOMContentLoaded', () => { " . $code['content'] . "});</script>";
		$buffer = str_replace( $code[0], $new_code, $buffer );
	}
    return $buffer;
}

function buffer_start() { ob_start("callback"); }

function buffer_end() { ob_end_flush(); }

add_action('wp_loaded', 'buffer_start');
add_action('shutdown', 'buffer_end');

    (inspired from https://katsarov.info/3-code-snippets-core-web-vitals/)

    It might not be the most optimized way, but couldn’t find a better one, since some plugins add inline JS in different places.

    Thanks again for your work and support.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Filter hook for modifying inline javascript’ is closed to new replies.