I am currently developing a website using HTML, CSS, and JavaScript. The project follows the usual structure with multiple HTML files (such as Index.html, Footer.html, Whatsapp.html), styles.css, and app.js.
Within my Index.html file, I include the stylesheets and scripts in the <header> like this:
<link rel="stylesheet" href="css/styles.css">
<script src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script >
$(document).ready(function () {
$('#whatsapp').load('Whatsapp.html');
$('#footer').load('Footer.html');
});
</script>
Before the closing </body> tag in Index.html, I also include the JavaScript file like this:
<script type="text/javascript" src="js/app.js"></script>
Within the <body> section, there is a
<div id="whatsapp"></div>On one side, I have the Whatsapp.html file structured like this:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/logo.jpg" type="img/logo.jpg">
<!--STYLES-->
<link rel="stylesheet" href="css/floating-wpp.min.css">
<!--STYLES-->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/floating-wpp.min.js"></script>
</head>
<div id="WAButton" class="whatsapp-container"></div>
<script type="text/javascript">
// WhatsApp functionality goes here
</script>
On the other hand, I have the floating-wpp.min.js file which contains specific functions for the WhatsApp behavior.
The source code for the WhatsApp functionality can be found at: https://github.com/rafaelbotazini/floating-whatsapp
Upon running the website, the console displays the message: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
If you have any insights or solutions to this issue, your help would be greatly appreciated. Thank you.