What methods are available for incorporating JavaScript classes from separate files into HTML while maintaining compatibility with IOS?

Currently, I find myself in a situation where I am required to utilize classes from JavaScript across various js files. For instance, there is a class named Panel located within the file js/radar-home.js. Below is how I am currently utilizing the class within my HTML file:

<script src="{{ asset('js/radar-home.js') }}"></script>
<script>
        try{
            var panel1 = new Panel(args);
        catch(err){
            alert("Internal Error - " + err);
        }
</script>

This approach functions flawlessly on Windows and Android devices, as well as all the browsers I have tested, including Chrome. However, when attempting to load this on Safari, Chrome, Firefox, or the WebDebug app on my iPhone or iPad, an alert pops up with the message: 

Internal Error - RefrenceError: Can't find variable: Panel
.

Environment details:

  • PHP 7.3.21
  • Laravel 6.18.25
  • Hosted on an Ubuntu 20.04 server
  • The source code seems identical on both iOS and Windows browsers.
  • CloudFlare (proxied) - Even before setting this up, the exact same issue persisted, even when not using HTTPS.

Your assistance would be greatly appreciated.

EDIT: I have added a function within radar-home.js that is not encapsulated within a class. This function executes without errors on desktop platforms but encounters issues on IOS. The error output states: 

RefrenceError Can't find variable: testing123
(testing123() was the test function created).

javascriptioslaravel

Answer №1

In order to ensure the code is executed properly, it's important to wait for the DOM to be fully loaded. Currently, the code is running before radar-home.js has finished loading onto the page. A solution could be:

    <script src="{{ asset('js/radar-home.js') }}"></script>
    <script>
      if(document.readyState === "loading") document.addEventListener('DOMContentLoaded', executeCode); else executeCode();
    
      function executeCode(){
          try{
                var panel1 = new Panel(args);
            } catch(err){
                alert("An internal error occurred - " + err);
            }
      }
    </script>

Answer №2

It turns out that the solution to this problem is something I wish I had looked into earlier. This issue was specific to IOS devices.

The scripts were not loading due to syntax errors or other issues that IOS does not handle well. While Chrome, Firefox, and most browsers try to interpret JavaScript code correctly, IOS is more strict.

By correcting all errors with the help of a JavaScript validator (excluding ES6 errors), everything started working perfectly on IOS.

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

Exploring JSON data in AngularJS

After creating a new Angular App, I decided to store some data in a JSON file. My main concerns are where to best store the .json file within the app and how to access it. Currently, I am facing this error in my Chrome console: GET http://localhost:8000/t ...

javascriptangularjsjsonget

Is there a way to transform a Phaser 3 game into an android-game application?

As someone who is new to Phaser, I am curious about the possibility of converting a Phaser game into an Android game. Currently, I am utilizing Phaser with NPM for my projects. Any insights or advice on this matter would be greatly appreciated. Thank you! ...

javascriptnpmapkphaser-framework

What's the most effective method for isolating elements in HTML to prevent one element from impacting another?

I recently created a password form in HTML with some nice functions. However, after making a small adjustment, the CSS is causing the elements to shift when clicking on different input boxes. This results in the labels on the form moving slightly up and do ...

javascripthtmlcss

Issue accessing object property in Handlebars template with ExpressJs

Personalized Routes: router.use(function(req, res, next) { res.locals.currentUser = req.user; next(); }); /* Accessing the home page. */ router.get('/', function(req, res, next) { console.log(res.locals.currentUser.username); ==>> t ...

javascriptnode.jsexpresshandlebars.js

A sleek CSS text link for a stylish video carousel

I am attempting to create a CSS-only text link to video slider within our Umbraco CMS. Due to the limitations of TinyMCE WYSIWYG, I am restricted in the amount of code I can use as it will strip out most of it. So far, I have developed a basic CSS slider ...

javascriptjqueryhtmlcss

Synchronizing information between different controllers using a service

After reading the discussion on this stackoverflow post, it seems like using services is the recommended way to transfer data between controllers. However, in my own testing on JSFiddle here, I encountered difficulties in detecting changes to my service w ...

javascriptangularjs

What are some techniques for creating a volumetric appearance with THREE.Mesh in WebVR?

Currently, I am in the process of transferring an existing three.js project to WebVR with Oculus Rift compatibility. This application takes an STL file as input, generates a THREE.Mesh based on it, and displays it in a virtual scene. While I was able to su ...

javascriptthree.jsoculuswebvr

Ways to retrieve the response object from an express application

I am currently working on developing a nodejs application with mysql and my objective is to have my controllers and messages separated into different files. Below are examples of what I am aiming for: First, here is a snippet from my auth controller file: ...

javascriptmysqlnode.jsexpress

Tips for efficiently printing invoices on specific paper: Print a maximum of 20 items per sheet, and if it exceeds this limit, continue onto the next page. Ensure the total amount is

$(document).ready(function(){ var j = 23; for (var i = 0; i < j+11; i++) { if (i != 0 && i % 11 == 0) { $("#printSection div").append("<?php echo '<tr><td>fff</td></tr>'; ?>"); ...

javascriptjqueryhtmlcss

Tips for creating a for loop in a .js script within MongoDB that allows for passing a variable containing the database name to a text file

In a .txt file, I have a list of database names as shown below: local test admin Is there a way to dynamically pass arguments instead of hardcoding them in .js scripts for mono go? db = db.getSiblingDB('test'); date = new Date() dat ...

javascriptnode.jsmongodb

Filtering JSON data in AngularJS is simple and effective

I am working with JSON data and I want to display it filtered by genre. The solution provided in the previous question How to filter JSON-Data with AngularJs? did not work for me. Here is myapp.js: var myApp = angular.module('myApp', []); myAp ...

javascriptjsonangularjs

What exactly are Node.js core files?

I recently set up my Node.js application directory and noticed a presence of several core.* files. I am curious about their purpose - can these files be safely removed? The setup involves installing Node.js alongside Apache using mod_proxy to host one of ...

javascriptnode.js

Generate a separate div in an HTML file for each item listed in a JSON document

I have a JSON file structured like this: { "text": "HelloWorld", "id&quo;t: "1", }, { "text": "HelloMoon", "id": "2", } Now, I want to generate a <div> in my HTML for ...

javascripthtmljson

Could it be that I am not effectively utilizing and integrating readable streams in a clear and efficient manner?

This program is designed to read data from a text file named 'IN.txt' and write it to a new file called 'copy.json' in JSON format. Each line of the text file contains words separated by tabs, which are then split into an array. Afte ...

javascriptnode.jsstream

Arrange the array of days and months in JavaScript

Attempting to rearrange a date Array from newest to oldest has proven challenging as the list.sort function only rearranges based on the initial number. The Array in question is as follows: var MyArray = ["13 Jun", "09 Jun", "25 Aug", "30 Jun", "13 Aug"]; ...

javascriptarrayssorting

Issue encountered while attempting to implement AJAX in Symfony for filtering a section based on category

Attempting to utilize AJAX to filter a section of movies by category, here is the Jquery code being used: $(function(){ $('.Action').click(function(e){ $("#moviesContainer").html("Loading movies..."); $.get($(this).attr("href"), functi ...

javascriptjqueryajaxsymfonytwig

Generating a list of items to buy using a JSON document

So here's the json file I'm working with: [ {"task":"buy bread","who":"Sarah","dueDate":"2023-10-18","done":false}, {"task":"clean car","who":"David","dueDate":"2023-08-30","done":true}, {"task":"write report","who":"Jenny","dueDate":"2023-09 ...

javascriptjqueryhtmlajaxjson

Why isn't the AngularJS injected view resizing to fit the container?

As a novice delving into a project in the MEAN stack, I'm encountering inconsistent HTML previews. When I view it independently versus running it from the project, the display varies. Here's the intended appearance (in standalone preview): imgu ...

javascripthtmlcssangularjs

Allowing unauthorized cross-origin requests to reach the SailsJS controller despite implementing CORS restrictions

My cors.js file has the following configuration: module.exports.cors = { allRoutes: true, origin: require('./local.js').hosts, // which is 'http://localhost' } I decided to test it by making a request from a random site, Here is ...

javascriptnode.jscorssails.js

Accessing stored data in Android webview when server connection is unavailable

I have an Android application that utilizes a webview. The backend server is written in Java and serves all the front-end files, creating the cache manifest through Apache Tomcat. My predicament lies in figuring out how to make the webview load from the a ...

javascriptjavaandroidwebviewhtml5-appcache