Is it possible to define functions conditionally for different modern browsers, such as Safari?

Question

Is it possible to define functions conditionally for different modern browsers, such as Safari?

What is the most effective method for conditionally defining functions in modern browsers?

I have noticed that Safari 12 (iOS 12.0.1 and macOS 10.14) does not correctly define conditional functions, while Chrome, Firefox, and Edge behave correctly. I am curious about the standard behavior for a JavaScript engine so that I can report this potential bug to Apple if necessary.

Context: We are implementing this approach to prevent Google Analytics (gtag.js) from loading unless a user consents to GDPR. The initialization code for Google's gtags.js contains a line

function gtag(){dataLayer.push(arguments);}

which causes issues in Safari.

Below is the code snippet, with a demo available at JS Fiddle

<html>
  <head>
    <title>Safari JS Engine Test</title>
    <script type="text/javascript">
      if (false) {
        function conditionalFunctionality() {
          alert("Performing conditional functionality");
        }
      }
      window.onload = function() {
        if (typeof conditionalFunctionality === "function") {
          alert("BAD. It's defined");
        } else {
          alert("GOOD. It's NOT defined");
        }
      }
    </script>
  </head>
  <body>
    <h1>Safari JS Engine Test</h1>
  </body>
</html>

Mugshots

https://i.sstatic.net/Y87Tfl.jpg https://i.sstatic.net/UdEIUl.png

javascript google-chrome firefox google-analytics safari

Answer 1

Answer №1

It has been pointed out in the previous comments that function definitions may behave unexpectedly when not placed at the "top level." Take for example:

a()
function a() { console.log("here"); }

In this scenario, the console will log the message even though the function definition comes after its usage. This phenomenon is known as hoisting in Javascript, and you can find a detailed explanation here:

(thanks to pointy)

Different web browser versions handle hoisting differently, resulting in the inconsistency you may be experiencing. This is why using "strict" mode (i.e., including "use strict"; at the beginning of your code block) can modify this behavior.

Personally, when I want to achieve similar functionality, I prefer using "function expressions." This would look something like:

var conditionalFunctionality;
if (false) {
  conditionalFunctionality = function () {
    console.log("conditionally defined");
  }
}
if (conditionalFunctionality) {
  conditionalFunctionality();
}

This approach also offers the advantage of naturally handling falsy values without requiring checks like

typeof conditionalFunctionality === "function"

.

Answer 2

It has been pointed out in the previous comments that function definitions may behave unexpectedly when not placed at the "top level." Take for example:

a()
function a() { console.log("here"); }

In this scenario, the console will log the message even though the function definition comes after its usage. This phenomenon is known as hoisting in Javascript, and you can find a detailed explanation here:

(thanks to pointy)

Different web browser versions handle hoisting differently, resulting in the inconsistency you may be experiencing. This is why using "strict" mode (i.e., including "use strict"; at the beginning of your code block) can modify this behavior.

Personally, when I want to achieve similar functionality, I prefer using "function expressions." This would look something like:

var conditionalFunctionality;
if (false) {
  conditionalFunctionality = function () {
    console.log("conditionally defined");
  }
}
if (conditionalFunctionality) {
  conditionalFunctionality();
}

This approach also offers the advantage of naturally handling falsy values without requiring checks like

typeof conditionalFunctionality === "function"

.

Answer 3

Answer №2

In response to Pointy's comment, it is not recommended to conditionally define functions but rather define the function for all browsers and execute code in the body conditionally based on the browser.

If you want to learn how to detect specific browsers, check out this informative post on stackoverflow: How to detect Safari, Chrome, IE, Firefox and Opera browser?

For example, you can create a function like this:

function f(...) {
    if (isSafari()) {
        // Add Safari-specific functionality
    else {
        // Add other functionality
    }
}

The isSafari function should be a wrapper around a browser check as demonstrated in the stackoverflow post linked above.

EDIT: If you need to base the execution on specific functionality rather than browsers, replace isSafari with a function that checks if the current browser supports the desired functionality instead of checking the browser type.

The provided link actually assesses the browser's capabilities to identify which browser is being used, so you can use that approach to address your problem effectively.

Answer 4

In response to Pointy's comment, it is not recommended to conditionally define functions but rather define the function for all browsers and execute code in the body conditionally based on the browser.

If you want to learn how to detect specific browsers, check out this informative post on stackoverflow: How to detect Safari, Chrome, IE, Firefox and Opera browser?

For example, you can create a function like this:

function f(...) {
    if (isSafari()) {
        // Add Safari-specific functionality
    else {
        // Add other functionality
    }
}

The isSafari function should be a wrapper around a browser check as demonstrated in the stackoverflow post linked above.

EDIT: If you need to base the execution on specific functionality rather than browsers, replace isSafari with a function that checks if the current browser supports the desired functionality instead of checking the browser type.

The provided link actually assesses the browser's capabilities to identify which browser is being used, so you can use that approach to address your problem effectively.

Is it possible to define functions conditionally for different modern browsers, such as Safari?

Mugshots

Answer №1

Answer №2

Similar questions

I am looking to consolidate my array of objects into a single object with distinct keys

Refreshing Element in Django Using AJAX

Encountering syntax errors in GraphQL

Having trouble retrieving user login information in Postman

Having trouble displaying toasts on my website using Angular Material design and $mdToast

How can I implement Before() and After() hooks within a hooks.js file for a Selenium and JavaScript project?

Guide on adding HTML to an array every third time for displaying

Evaluating Vue.js Watchers using Jasmine

Choosing an option in Vue using select, v-for loop, and v-model

Exploring the challenges of implementing the Lob Node API wrapper within a MeteorJs project due to conflicts with the 'fs' module

Display the elements of a div at a reduced size of 25% from its original dimensions

Tips for utilizing the Struts2 submit tag as a button without triggering form submission

When conditionals are used to infer function parameters in TypeScript, they may end up with the type 'never'

Opening a window using Javascript with a PHP Ajax response

What is the best way to retrieve the value of a select tag in Vue JS?

Detect when a user's mouse is hovering over an iframe and escape the iframe accordingly

Tips for including parameters in an array of values when using getStaticPaths

Exploring the Node.js Connector: Utilizing Collection.remove

What is the process for adding content to a textarea field?

Incorporate conditional components into a React state object