Redirection

How to redirect if javaScript is disabled?

I have a site which relies heavily on javaScript. I created a mirror site, which has all the JS as well as all the elements that require JS removed. What is a good, easy way to redirect users to the mirror site if they don’t have javaScript enabled?

I tried this, but it doesn’t seem very good:

I also tried to putting header-redirect into the noscript tag, but that didn’t work.

Solution – 1

What is your definition of “not very good”?

Solution – 2

Make the no-JavaScript version of the site the default. Include a small script in there to redirect to the scripted site.

Or, abandon the use of a redirect entirely and go with Progressive Enhancement

Solution – 3

Some people purposely disable Javascript, and you might want to give them a chance to turn it on before redirecting them.

Solution – 4

I wouldn’t do client-side redirection, as that might seem annoying to the user. Instead, what I would do is use to show the content of this JS-less site on the same page. It may be more work, but it would definitely be a smoother experience.

Solution – 5

Use this code that I came up with:

It uses style to block what’s on the page so then people won’t notice anything before it redirects. The only thing that annoys me is that I want something better than meta refresh as that can be blocked on some browsers like IE. A PHP header isn’t really a solution as you can’t put it in a noscript tag as it will just ignore it and write it out straight away.

Solution – 6

I came up with a better solution than having to redirect the user as meta-refresh can be disabled in IE.

That way the tags are where they’re meant to be.

Solution – 7

Just simply put this code to your html file

     
This page will redirect in 2 seconds.
   

Источник

How to Redirect to Another Web Page Using JavaScript?

In this article we’ll look at different ways we can use to redirect to a new web page (or a resource) using only JavaScript. In addition to that we’ll also be exploring the potential fallbacks you can put in place when JavaScript is disabled, the SEO impact of using JavaScript for redirection purposes and alternative solutions.

Redirect Using JavaScript

Ideally, a redirect should be issued from the backend with correct HTTP redirect headers sent to the client. But if we must redirect from JavaScript, we can do so using the methods below:

// redirect to a new page window.location.href = 'https://www.example.com/'; // same as window.location.href = . window.location = 'https://www.example.com/'; window.location.assign('https://www.example.com/'); // redirect to new page and, // replace the original document in browser history with new one window.location.replace('https://www.example.com/');

In most cases, the replace() function might be the best option as it won’t cause redirect loops when users hit the browser’s back button.

Some browsers and most web crawlers may not execute JavaScript for various reasons, which is why having a fallback in place is a good idea.

Fallback When/If JavaScript Is Disabled:

Preferably, we should issue HTTP headers originating from the backend (server-side) to issue a redirect with appropriate redirection code. However, since we’re specifically talking about JavaScript / Frontend redirection, we could use HTML’s meta tag refresh (in the section of the web page) to instruct the browser to refresh the current web page (or an iframe ) after a specified time interval (in seconds). Consider the following example:

The 0 specified in the content attribute instructs the browser to redirect immediately. Changing it to a positive non-zero value would instruct the browser to wait before refreshing the page (the value is interpreted in seconds).

Additionally, we can place a fallback, for example a link, for older browsers in case the meta refresh doesn’t work:

To make sure, the code only executes when/if the browser has JavaScript disabled, we could wrap the meta tag (or other relevant code) inside a noscript tag like so:

Potential Side-Effects:

• If a page redirects too quickly (i.e. in less than 2-3 seconds), it can break the Back button on the browser as each time you move back to the redirecting page, redirection will occur again almost immediately. This is especially bad in terms of usability as it can trap the user on the page he was redirected to.
• It can be considered as a «Doorway Page» which is considered as an un-ethical SEO process by search engines.
• Sometimes a mistake, or poorly planned redirections, can cause an infinite sequence of redirects, redirecting back and forth between two or more pages.

JavaScript Redirect’s Impact on SEO:

Why a JavaScript Redirect May Impact Your Search Engine Ranking Negatively:

Like mentioned previously, most web crawlers may not execute JavaScript which may negatively impact your web page’s search engine ranking. You might imagine using meta refresh would resolve the issue for all web crawlers, but such is not the case. In fact, an HTML page that contains a meta refresh element returns an HTTP status code of 200 OK (which is different from redirect status codes such as 301, 302, etc.). How that HTML 200 OK response (with a meta refresh tag) is processed and/or interpreted by a user-agent/bot/crawler depends entirely on the agent, its specific purpose and its programming.

Alternatives to JavaScript Redirect, Without Compromising SEO:

The best way to overcome these issues may be:

1. To add a link rel=canonical in the section of your web page to inform search engines of a duplicate page (e.g. ); this is easier to implement as it doesn’t involve doing anything on the server-side. However, you must keep in mind that all search engines or web crawlers may not honor it;
2. To issue either of the following HTTP headers from the web server (or a backend/server-side script):
   1. To properly issue an HTTP redirect header with most-appropriate redirect status code such as 301, 302, etc., or;
   2. To display a 404 Not Found for web pages that you may want to kill off and let die.

   Although a 404 may be considered bad for SEO in most cases, it may still be more meaningful in some. To help determine what course of action may be best suited in your particular case, you might want to ask yourself the following:

   1. Does the page receive important links to it from external sources?
   2. Does the page receive a considerable amount of visitor traffic?
   3. Is it an obvious (or a popular) URL that visitors/links intended to reach?

   If answer to any of those is a yes, you might want to consider a 3xx redirect instead of a 404 . Otherwise, it may be alright to issue a 404 – the reason being 1) we’d save up bandwidth from search engines trying to crawl and index a junk/stale page, and 2) we’d be able to inform the user about the error and display a search option and/or other relevant links instead (which may enhance the user experience).

   Redirect Immediately After Page Load

   By simply placing the redirect code in the section of the webpage (wrapped in script tag of course) we can issue an immediate redirect. For example:

   window.location.href = "https://www.example.com";

   Or, as an alternative, we could also use an inline onload event on the body tag like so:

   In this case, however, you must note that everything that preceedes the body tag will be parsed by the browser first.

   Redirect When Web Page Loads:

   If you wish to make sure the web page finishes loading, or certain scripts etc. load before issuing a redirect, depending on exactly when you intend to do it, you may benefit from the following three events in this particular case:

   1. window.onload Event: fired when DOM is ready and all the contents including images, css, scripts, sub-frames, etc. finished loaded (i.e. everything is loaded).
   2. document.onload Event: fired when DOM tree (built from markup code within the document ) is ready, which can be prior to images and other external content is loaded.
   3. document.onreadystatechange Event: fired when:
      1. the document is still loading;
      2. document finished loading with resources (such as images, css, frames, etc.) still pending;
      3. document and all sub-resources have finished loading (i.e. window.onload is about to fire).

      Examples:

      // Example #1 window.addEventListener('load', function(event) < // all resources finished loading window.location = 'https://www.example.com/'; >);

      // Example #2 document.onreadystatechange = function () < switch(document.readyState) < case 'loading': // document still loading break; case 'interactive': // document has finished loading; DOM elements can now be accessed break; case 'complete': // page is fully loaded (i.e. all resources finished loading) break; >>

      Redirect After a Certain Period of Time Has Elapsed

      To delay the redirect by a few seconds, we can use JavaScript’s setTimeout function like so:

      // redirect in 3 seconds (or 3000 ms) setTimeout(function() < window.location.href = "https://www.example.com"; >, 3000);

      • Time in setTimeout function is defined in miliseconds (i.e. 1000 ms = 1 second).
      • Since a web page is parsed sequentially from top to bottom, script tags (that are not marked defer or async ) load and execute before the parsing of the rest of the page continues. Therefore, placing the code in the section of the web page should execute the code immediately and redirect in the specified number of miliseconds. You could, however, also place this code at the end of the web page (or anywhere in the page for that matter), which would mean the code will execute when the browser parser reaches the particular segment of the code in the document.

      Hope you found this post useful. It was published 22 Mar, 2017 (and was last revised 01 Jun, 2020 ). Please show your love and support by sharing this post.

      Источник

      php — WordPress How to redirect OR detect if Javascript is disabled, for Chrome?

      

      I would like my WordPress site to have one of those redirects to a specific page if JavaScript is disabled on the site or display a message. Something that says something along the lines, «Please enable JavaScript to use this site.».

      I am asking this, because all of the methods I’ve found do NOT work with Chrome because Chrome ignores the

      This is what I have now, in case anyone is trying to find a method for this like I was.

       
      // Shows when Javasript is disabled.
       
      // Shows when Javasript is enabled.
       #js-enabled  Copy code

      

      

      Answer

      Solution:

      Java script is disabled !
        Copy code

      Share solution ↓

      Additional Information:

      Didn’t find the answer?

      Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

      Similar questions

      Find the answer in similar questions on our website.

      Write quick answer

      Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

      About the technologies asked in this question

      PHP

      PHP (from the English Hypertext Preprocessor — hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites. The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
      https://www.php.net/

      JavaScript

      JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
      https://www.javascript.com/

      CSS

      CSS (Cascading Style Sheets) is a formal language for describing the appearance of a document written using a markup language. It is mainly used as a means of describing, decorating the appearance of web pages written using HTML and XHTML markup languages, but can also be applied to any XML documents, such as SVG or XUL.
      https://www.w3.org/TR/CSS/#css

      Welcome to programmierfrage.com

      programmierfrage.com is a question and answer site for professional web developers, programming enthusiasts and website builders. Site created and operated by the community. Together with you, we create a free library of detailed answers to any question on programming, web development, website creation and website administration.

      Get answers to specific questions

      Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.

      Help Others Solve Their Issues

      Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.

      Источник