A brief introduction to graceful degradation in JavaScript-JS Tutorial-php.cn

A brief introduction to graceful degradation in JavaScript

黄舟

Release： 2017-07-24 15:55:20

Original

1308 people have browsed it

The so-called smooth degradation means that visitors can still browse your webpage smoothly when the browser does not support JavaScript or JavaScript is disabled. The following is a brief introduction to smooth degradation in js. Friends who are interested Let’s take a look

The so-called smooth degradation means that visitors can still browse your webpage smoothly when the browser does not support JavaScript or JavaScript is disabled; that is, although some functions cannot be used, but Basic operations can still be completed successfully.

Here we use opening a link in a new window as an example. We know the method of opening a new window in js:

window.open(url,name,features)

Copy after login

Here, the url is to be opened The URL address of the web page, name is the name of the new window, and the last features are a series of parameters

Okay, now write a simple function:

function openwindow(winUrl){ 
window.open(winUrl,"new window","width = 320 , height = 480") 
}

Copy after login

Then you can use the pseudo-protocol to call the function:

<a href = "javascript:openwindow(&#39;http://www.google.com&#39;);">google</a>

Copy after login

This approach can run normally in browsers that support the "JavaScript:" pseudo-protocol, but not in browsers that do not support JavaScript. The browser will try to open the link but fail, and will do nothing in browsers with JavaScript disabled;

An alternative is to use onclick:

<a href = "#" onclick = "openwindow(&#39;http://www.google.com&#39;);return false;">google</a>

Copy after login

Here "#" represents an empty link. After adding return false, the tag will not jump to the link specified by href. The actual work here is performed in onclick. However, this still cannot be opened in a browser with JavaScript disabled.

So how can we solve this problem? In fact, we only need:

<a href = "http://www.google.com" onclick = "openwindow(http://www.google.com);return false;">google</a>

Copy after login

or:

<a href = "http://www.google.com" onclick = "openwindow(this.href);return false;">google</a>

Copy after login

We use onclick to execute the JavaScript function, but the url is indeed filled in the href attribute. In this way, if it is in a browser with JavaScript disabled, although it cannot open a new window and open a connection in a new window, but At least you can jump to the target web page (current page);

Finally, let me talk about why you should use smooth degradation. You may have this idea: let browsers that have disabled or do not support JavaScript access you smoothly. Is it so important to have a website? After all, there should be very few users who use websites that do not support JavaScript or always disable the JavaScript function.

It is true that there are very few such users, but it is very important;

This user may be a search robot - an automated program. The purpose of browsing various web pages is just to join In the search engine database, all major search engines have similar programs, but most search robots cannot understand JavaScript code, so if your web page cannot be degraded smoothly, it will greatly affect its ranking on the search engine.

Summarize

The above is the detailed content of A brief introduction to graceful degradation in JavaScript. For more information, please follow other related articles on the PHP Chinese website!