Hello friends, today we're going to know about javascript, how javascript works, and how to force users to enable javascript in browser.
Let's start with a story. A random techy guy dives into his or her browser and blocks the javascript. Ugh, you might be thinking, what the heck am I talking about "disabling javascript in a browser"?
Some of you might know what I am talking about, but some of you won't. If you're one of them who don't know what I am talking about, let's understand that first.
What is Javascript?
Before discussing about "disabling javascript in a browser", you might have another question in your cerebrum that: what is javascript.
In a nutshell, javascript is a scripting or a programming language created by Brenadan Eich in the year 1995, and it is used a lot on the internet.
A report by Statista tells that there are 1.88 billion websites as of today and a report by W3Techs tells that 97.6% of all the website's use javascript.
Javascript allows us to enable complex features on a webpage, such as interactive maps, content updates, displaying advertisements, and it is also used in analytics tracking.
How does a Browser Understand Javascript?
Alright, enough discussed javascript, now it’s time to understand how a browser understands javascript? Nowadays, almost every web browser has its javascript engine, which handles and runs the javascript code.
For example, the Chrome browser has a javascript engine named "V8", and the edge browser uses a javascript engine named "Chakra".
As we all know, javascript is an interpreted language, which means that the code gets executed line by line. With the help of the below image, we can understand how a javascript engine works.
In the above image, a javascript file is given to a parser that phrases the javascript code. Then comes the AST, if there are no mistakes/errors in the code, the javascript engine creates a data structure called Abstract Syntax Tree.
Next, the javascript engine converts that javascript code into machine code. Thus in the above picture, it is written: "Conversion to machine code" (in short).
The final step is to send the machine code generated from the javascript engine to the processor for execution. Thus, we see our preferred output.
Why do you need to tell Users to Enable JavaScript in their Browsers?
Alright, now let’s understand the main point: why do you need to tell the users to enable javascript in their browsers.
As we discussed earlier, Javascript is used to make a webpage more complex and more interactive. Without javascript, most of the functions such as analytics tracking and displaying advertisements won’t work.
This results in inaccurate data in the google analytics dashboard. Not only this, but it can also lead to the loss of the revenue generated through advertisements.
Some of the basic features, such as the dark mode, will not work if the javascript is disabled in the browser. So, to prevent these issues, we use a script to force the users to enable javascript in the browser to see the content of the webpage.
That’s why I recommend you to use this script to force users to enable javascript by following the method’s stated below. But before implementing it, let’s understand how the force users to enable javascript script works.
How does this Force Users to Enable JavaScript Script Work?
Alright, now let’s understand how this to force users to enable javascript script works. As we discussed earlier about javascript and how a browser understands javascript. It’s time to understand how this force users to enable javascript script works.
This code you’re maybe going to implement in your website consists of basic HTML and CSS code inside a <noscript> tag.
Here’s a short note about the <noscript> tag: This HTML tag is used to display the code on the browsers when javascript is disabled in a browser. And except for this <noscript> tag, there’s some basic code for the popup.
As I told earlier, if someone disabled javascript in their browser, this popup will appear. Alright, now let’s see how you can implement it in your blogger and WordPress website.
How does this Force Users to Enable JavaScript Script looks like?
|
| Demo of this Force Users to Enable JavaScript Script |
How to Force Users to Enable JavaScript in Blogger?
I will now guide you to how you can add this script to force users to enable javascript in blogger. Ok, let’s begin!
Step 1. At first, you need to go to the Blogger dashboard i.e. Blogger.com.
Step 2. Go to the Themes Section and Click Edit HTML Button.
Step 3. Copy the code given below.
<noscript><style>body,html{overflow:hidden}#JsEnable{display:none}#enable-javascript{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif!important;background:rgba(0,0,0,.5);backdrop-filter:saturate(180%) blur(10px);padding:0;position:fixed;bottom:0;left:0;top:-100px;right:0;z-index:1000;opacity:1;visibility:visible;height:auto}#enable-javascript svg{width:100px;height:100px}#enable-javascript svg path{fill:#fff}#enable-javascript .noscript-style1{background-color:#1434a4;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:16px;font-weight:400;line-height:1.5em;max-width:670px;box-shadow:0 20px 10px -10px rgba(0,0,0,.15);border:15px solid rgba(0,0,0,.07);overflow:hidden;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:visible;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;pointer-events:auto;transform:rotateX(0) rotateY(0) rotateZ(0) scale(1);opacity:1;animation:Fade .5s;-moz-animation:Fade .5s;-webkit-animation:Fade .5s;-o-animation:Fade .5s}#enable-javascript .noscript-style1:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,.2)}#enable-javascript .noscript-style1 .JSEnable,#enable-javascript .noscript-style1 h4{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:1.5rem;font-weight:700;margin-bottom:20px}</style><div id='enable-javascript'><div class='noscript-style1'><span class='JSEnable'>Enable JavaScript</span><br/><svg viewBox='0 0 24 24'><path d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z'/></svg><br/>Javascript is disabled on your Browser. To browse this webpage enable javascript from the browsers settings.</div></div></noscript>
|
| Step 4 - Blogger - How to Force Users to Enable Javascript in Browser? |
Step 4. Paste the code just above the </body> tag, as shown in the above image.
Step 5. Click on Save! and you're done with installing the force users to enable javascript script in blogger.
That’s it! You have to just perform the stated steps in your blogger website to force users to enable javascript in browser.
How to Force Users to Enable JavaScript in WordPress?
I will now guide you to how you can add this script to force users to enable javascript in blogger. Ok, let’s begin!
Step 1. At first, you need to go to the WordPress dashboard i.e. yourdomain.com\wp-admin\.
|
| Step 2 - WordPress - How to Force Users to Enable Javascript in Browser? |
Step 2. Go to the Plugins Section and search for a plugin named "Insert Headers and Footers by WPBeginner" then install it and activate it as shown in the above image.
Step 3. Copy the code given below.
<noscript><style>body,html{overflow:hidden}#JsEnable{display:none}#enable-javascript{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif!important;background:rgba(0,0,0,.5);backdrop-filter:saturate(180%) blur(10px);padding:0;position:fixed;bottom:0;left:0;top:-100px;right:0;z-index:1000;opacity:1;visibility:visible;height:auto}#enable-javascript svg{width:100px;height:100px}#enable-javascript svg path{fill:#fff}#enable-javascript .noscript-style1{background-color:#1434a4;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:16px;font-weight:400;line-height:1.5em;max-width:670px;box-shadow:0 20px 10px -10px rgba(0,0,0,.15);border:15px solid rgba(0,0,0,.07);overflow:hidden;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:visible;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;pointer-events:auto;transform:rotateX(0) rotateY(0) rotateZ(0) scale(1);opacity:1;animation:Fade .5s;-moz-animation:Fade .5s;-webkit-animation:Fade .5s;-o-animation:Fade .5s}#enable-javascript .noscript-style1:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,.2)}#enable-javascript .noscript-style1 .JSEnable,#enable-javascript .noscript-style1 h4{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:1.5rem;font-weight:700;margin-bottom:20px}</style><div id='enable-javascript'><div class='noscript-style1'><span class='JSEnable'>Enable JavaScript</span><br/><svg viewBox='0 0 24 24'><path d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z'/></svg><br/>Javascript is disabled on your Browser. To browse this webpage enable javascript from the browsers settings.</div></div></noscript>
|
| Step 4 - WordPress - How to Force Users to Enable Javascript in Browser? |
Step 4. Now, click on the "Click Here" link as marked in the above image.
|
| Step 5 - WordPress - How to Force Users to Enable Javascript in Browser? |
Step 5. Now, paste the code in the "Scripts in Footer" section, as shown in the above image.
Step 6. Click on Save! and you're done with installing the force users to enable javascript script in WordPress.
That’s it! You have to just perform the stated steps in your WordPress website to force users to enable javascript in browser.
Final Words
So friends, how did you guys like this post on How to Force Users to Enable Javascript in Browser? Now you must have understood How to Force Users to Enable Javascript in Browser?
Tell us how you felt about this article for How to Force Users to Enable Javascript in Browser? by writing a comment so that we too have a chance to learn and improve something from your ideas.