Unable to receive URL parameters using JavaScript on a mobile device

Question

Unable to receive URL parameters using JavaScript on a mobile device

I have been developing a program that displays all users' buttons on a screen, except for the current user's buttons. I came across this code snippet to extract URL parameters:

function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return "";
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

My program successfully adds buttons to all players' screens, but there seems to be an issue with the parameter extraction code on my iPhone and iPad compared to my computer. The URL parameters in question are formatted as: ?username=User1 On my computer, when I execute getParameterByName('username'), it correctly returns User1. However, on mobile devices, it simply returns null. Any insights or suggestions on how to troubleshoot this?

javascript parameters

Answer 1

Answer №1

This script is a handy JavaScript function I created for extracting URL parameters. It returns an associative array of values, allowing you to request specific values as needed.

// demonstration function
console.clear();
document.querySelector(".btn").addEventListener("click", function () {
  console.log('username:', getUrlParams("username"));
  console.log('all-params', getUrlParams());
});

// Function to retrieve URL parameters
getUrlParams = function (key) {
  var paramsArray = [],
    urlParams = window.location.href
      .slice(window.location.href.indexOf("?") + 1)
      .split("&");
  urlParams.every(function (param) {
    var keyValue = param.split("="),
      tempObj = {};
    if (keyValue.length === 2) {
      tempObj[keyValue[0]] = keyValue[1];
      if (key && key === keyValue[0]) {
        paramsArray = keyValue[1];
        return false;
      }
      paramsArray.push(tempObj);
    }
  });
  return paramsArray.length > 0 ? (key && paramsArray[0] === key ? paramsArray[1] : paramsArray) : undefined;
};

<button class="btn">Click me</button>

[EDIT] In this code snippet, both calls will return "undefined" because there are no URL parameters in the URL provided. You can try running the code on this CodePen instead (check your web console): https://codepen.io/cjboco/pen/MWwZbKO?editors=1010

[EDIT#2] Here's an example of the expected results:

Call: getURLParams("username")
Result: "User1"

Call: getURLParams()
Result: [{"username","User1"}]

Answer 2

This script is a handy JavaScript function I created for extracting URL parameters. It returns an associative array of values, allowing you to request specific values as needed.

// demonstration function
console.clear();
document.querySelector(".btn").addEventListener("click", function () {
  console.log('username:', getUrlParams("username"));
  console.log('all-params', getUrlParams());
});

// Function to retrieve URL parameters
getUrlParams = function (key) {
  var paramsArray = [],
    urlParams = window.location.href
      .slice(window.location.href.indexOf("?") + 1)
      .split("&");
  urlParams.every(function (param) {
    var keyValue = param.split("="),
      tempObj = {};
    if (keyValue.length === 2) {
      tempObj[keyValue[0]] = keyValue[1];
      if (key && key === keyValue[0]) {
        paramsArray = keyValue[1];
        return false;
      }
      paramsArray.push(tempObj);
    }
  });
  return paramsArray.length > 0 ? (key && paramsArray[0] === key ? paramsArray[1] : paramsArray) : undefined;
};

<button class="btn">Click me</button>

[EDIT] In this code snippet, both calls will return "undefined" because there are no URL parameters in the URL provided. You can try running the code on this CodePen instead (check your web console): https://codepen.io/cjboco/pen/MWwZbKO?editors=1010

[EDIT#2] Here's an example of the expected results:

Call: getURLParams("username")
Result: "User1"

Call: getURLParams()
Result: [{"username","User1"}]

Unable to receive URL parameters using JavaScript on a mobile device

Answer №1

Similar questions

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

Retrieve the Latest Information from the Asp.Table

Keep verifying the boolean value repeatedly

Refresh a div with Ajax once all data has been fully loaded

"An error occurred with the Google chart due to 'null' not being recognized as an object, specifically in relation to the select menu and onchange event

Dealing with Array Splicing Issues in Angular

What setting should I adjust in order to modify the color in question?

The property 'createUploadWidget' cannot be read from an undefined source

Mastering Backbone views and router functionality is essential for building scalable and efficient web

Is it possible to transmit messages from a Chrome extension to a Java server?

What is the best way to store data retrieved using a model.find({}) operation?

Preventing Users from Uploading Anything Other than PDFs with Vue

NPM encountered difficulties in resolving the dependency tree

Exploring the nuances between Ruby on Rails and the responses from json and JavaScript ajax

The navigation bar does not display the CSS when in the active state

What could be causing XMLHttpRequest to encounter issues with the readystate and status states while running on localhost

How to Extract a URL from an Anchor Tag without an HREF Attribute Using Selenium

Running Javascript based on the output of PHP code

Dynamic font size that adjusts as you change the window dimensions

Update your MySQL database with ease by leveraging the power of AJAX through a dropdown menu