I am trying to block or dequeue all the scripts of page on load and when user performs any event like click, scroll or keydown then reload or re-enqueue all scripts. I am using javascript to detect events and when any event occurs then I am making AJAX call for going to the php code and enqueue the scripts. I am able to dequeue the scripts but I cannot enqueue them again. Here's my code:
// For Removing Scripts
add_action('wp_print_scripts', 'remove_all_scripts_ir');
function remove_all_scripts_ir(){
global $wp_scripts;
$oldScripts = $wp_scripts->queue;
if(!is_admin()){
// Dequeue All Scripts
$wp_scripts->queue = array();
echo "<input type='hidden' name='reload-scripts' value='".wp_json_encode($oldScripts)."' id='reload-scripts' />";
?>
<script>
scripts = document.getElementById("reload-scripts").value;
window.addEventListener("click",function(){
<?php echo "console.log('clicked_php')"; ?>
postAjax("<?= admin_url("admin-ajax.php") ?>", { scripts:scripts,action:"ir_reload_scripts" }, function(data){ console.log(data); });
});
function postAjax(url, data, success) {
var params = typeof data == 'string' ? data : Object.keys(data).map(
function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }
).join('&');
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.onreadystatechange = function() {
if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); }
};
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(params);
return xhr;
}
</script>
<?php
}
}
Here is the code to reload script
add_action( "wp_ajax_nopriv_ir_reload_scripts", function(){
$scr = $_POST["scripts"];
$scrNew = str_replace("\\\"","\"",$scr);
echo $scrNew;
$scripts = json_decode($scrNew);
add_action( "wp_print_scripts",function() use ($scripts){
global $wp_scripts;
$wp_scripts->queue = $scripts;
});
die();
});