Redirect link depending on JSON callback information

I experimented with utilizing JavaScript to automatically redirect website visitors based on their country.

The code snippet below demonstrates how the visitor's IP is checked to determine their country, such as CN for China, and then redirects them to another website accordingly.

<script async src="https://get.geojs.io/v1/ip/country.js"></script>

<script type="application/javascript">
  function geoip(json) {
    var userCountry = json.country;
  }

  if (userCountry == "CN") {
    window.location = "http://baido.com";
  }
</script>

Can anyone provide any guidance or assistance?

Answer №1

Although there is a marked solved answer, I still struggled to make it work. As an alternative, I came up with this solution:

  function geoip() {
  
   $.ajax({
        type: 'get',
        url: 'https://get.geojs.io/v1/ip/country.json',
        success: function(data) {
            if (data['country'] == "CN") {
              window.location = "https://baido.com/";
            }
    }
    });
    }
    
geoip();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer №2

It seems that the issue lies in how you are using the provided code example. The countrycode.textContent section is designed to display the user's country code in the browser, so it may not suit your specific needs if you are attempting a redirect.

Additionally, keep in mind that the geoip function is utilized by the script linked from geojs, meaning any redirection should be implemented within that function.

Below is an enhanced version of the code that should fulfill your requirements:


    <script type="application/javascript">
        function geoip(json){
            if (json.country_code == "CN") {
              window.location = "http://baido.com/";
            }
        }
    </script>
    <script async src="https://get.geojs.io/v1/ip/geo.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using separate files for routes in Express.js can help organize and streamline your code

I'm facing an issue while setting up a node project where I need to organize my files. Specifically, I want to place a file routes.js within the routes/routes.js directory and controllers files in the controllers/ directory. For instance, let's ...

Converting case classes using Json.format in Play Framework with a twist

I'm having trouble making the following code work, and I'm not sure if it's even possible: case class Product(name:String, category:Category) case class Category(name:String) object JsonConverter{ implicit val productJson = Json.format[ ...

Conceal a child div through the use of AJAX technology

Utilizing AJAX, I am loading pages on my website. Each page consists of two common div elements - the header div and the content div. When navigating from one page to another, I load the content div of the next page into the current page using the followin ...

Exploring the world of reactive programming in JavaScript by transforming traditional AJAX calls into Bacon.js streams while incorporating

How can I develop a method to convert calls to the server API to a Bacon.js / RxJs stream while supporting pagination? With pagination, I aim to keep track of the last requested item index and retrieve the next set of items based on the page size to popul ...

Using Javascript to update text content by utilizing `innerText` property instead of checking if it is

How can I selectively use Javascript to replace the specific word "Rindan" in the text below, but not if it appears within an attribute such as img alt=="Rindan"? I only want to replace instances of the word "Rindans" when it is part of the inner text an ...

The functionality of the Angular directive ngIf is not meeting the desired outcome

We are currently working on transferring data from one component to another using the approach outlined below. We want to display an error message when there is no data available. <div *ngIf="showGlobalError"> <h6>The reporting project d ...

Customizing Material UI: Grouping Tab components within a div container

How can I wrap the children of a Material UI Tabs component in divs? <Tabs value={value} indicatorColor="primary" textColor="primary" onChange={handleChange} > <div> <Tab label="x" /> ...

Steps to prevent specific links from being clickable in React Native's webview component

In my React Native app, I am utilizing the react-native-webview component to display blog posts. The code I have implemented is straightforward, but my goal is to restrict the webview to only show content from the blog section of the website, preventing us ...

Ways to obtain a referrer URL in Angular 4

Seeking a way to obtain the referrer URL in Angular 4. For instance, if my Angular website is example.com and it is visited from another PHP page like domaintwo.com/checkout.php, how can I detect the referring URL (domaintwo.com/checkout.php) on my Angul ...

Converting an ISO date to a standard JS date: The straightforward approach

Can anyone help me with converting an ISO date to a Standard JS Date format? The specific format I need is: Mon `Jul 20 2020 14:29:52 GMT-0500 (Central Daylight Time)` I would appreciate any guidance on the best approach for achieving this. Thank you in a ...

Aligning an object in ThreeJS to always face the camera, ensuring it is perfectly straight and flat

Reviewing this demo http://codepen.io/anon/pen/JdmMPW, I am working on creating a camera orbiting around a sphere with text labels/satellites (represented by the plane object) that should always face the camera. function render() { marker.lookAt(camera.p ...

Convert your Airbnb short link into the full link

I am currently developing an application that utilizes Airbnb links as part of its input. So far, I have identified two types of links: Long form, for example: . These are commonly used on desktop. Short form, such as: . These shorter links are often shar ...

After being deployed on Vercel, React is mistakenly redirecting to the incorrect file, although it functions properly when

I'm a beginner in JavaScript and I recently created a React project. Everything was working smoothly in local development until I deployed the project on Vercel. The issue is when a user clicks on the "about button," instead of showing 'about.htm ...

Clicking on the Angular Material Table will reveal the items for display

Only when I click on the table do items display. Upon initially loading the page, the table is empty for reasons unknown to me. I retrieve data from Rest-API Cloud Blobstorage and populate the empty Array with it. Check out the code snippet below: impor ...

Ways to alter the color of an icon when hovering over it

Is there a way to change the color of a material icon inside an IconButton material component when hovering over the IconButton? I've tried adding a class directly to the icon, but it only works when hovering over the icon itself and not the IconButto ...

What is the process for generating a GET request for selected checkboxes and subsequently showcasing the data on an HTML webpage?

Currently working on an app project and need assistance with implementing a feature. I have successfully set up a POST method for the checkboxes that are checked, but I am unsure how to retrieve this data and display it on my HTML page using a GET method ...

Sorting objects in an array according to their prices: A guide

Suppose we have the following data structure: var lowestPricesCars = { HondaC: { owner: "", price: 45156 }, FordNew: { owner: "", price:4100 }, HondaOld: { owner: "", price: 45745 }, FordOld: { owner: "", ...

Can we enhance this JavaScript setup while still embracing the KISS principle (Keep it simple, Stupid)?

I have completed the following tasks: Ensured all event handlers are placed inside jQuery DOM ready to ensure that all events will only run Defined a var selector at the top of events for caching purposes Please refer to the comments below for what I be ...

HTML and JavaScript code to desaturate or grayscale image rollovers without the need for additional image duplicates or sprites

Is there a way to achieve grayscale to color image rollover effects without duplicating images or using sprites? I'm looking for an alternative technique that can accomplish this. Any suggestions on how to implement it? ...

How can I modify the color of a div when a validation error occurs?

I have recently completed a contact form with validation using the constraint validation api. Although the files are functioning as intended, I am curious if there is a method to make the error boxes turn red when an error occurs and white (or hidden) when ...