What could be causing my JavaScript to not execute when going back on Safari?

Upon navigating back to a page from another within the same site, I have noticed that half of the functions do not execute properly without any errors appearing in the console. However, upon refreshing the page, everything functions as expected.

To troubleshoot, I added multiple console logs at the top level of my main JavaScript file but nothing was printed out.

I am curious about how Safari handles load events and runs JavaScript files differently on pages loaded in this manner?

This issue seems to be specific to pages utilizing Vue components.

javascriptsafarivue.js

Answer №1

To solve the issue, I implemented a solution that involves refreshing the page upon navigating back:

 window.onpageshow = function(event) {
      if (event.persisted) {
       window.location.reload() ;
   }
};

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

In what way does the Express.js 4 Router facilitate navigation to the 404 error page?

When using the express generator, the code generated in the app.js page includes: app.use('/', routes); app.use('/users', users); // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error(&ap ...

javascriptnode.jsexpress

What is the best way to retrieve a unique identifier from multiple arrays and store it in one shared variable?

I have an array stored locally and I need to retrieve the "name" ID from all of them. How can I achieve this using AngularJS or JavaScript? [{"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85cfeaedebc5e4abe6eae8">[ ...

javascriptarraysangularjsmultidimensional-arraylocal-storage

Steer clear of perpetually spinning loading icons in Vue.js

I am encountering an issue with my Vue.js preloader as it seems to be loading infinitely. I have been thinking about hiding the preloader container when the page is fully loaded using the mounted() method in the App.vue file. However, I am unsure about the ...

vue.js

Instructions for transferring an email attachment to a collaborative drive stored in a Google Sheets document

At the moment, I am utilizing a Google script that runs periodically on my Gmail account to retrieve all attachments labeled according to certain criteria. The issue arises when trying to access attachments within a folder located on a shared drive using t ...

javascriptgoogle-apps-script

Changes in props do not automatically update children via Ref

I'm working on a React component that needs to update whenever the width changes: import { useRef, useEffect, useState } from "react"; function Child({ containerWidth }) { console.log("CHILD", containerWidth); return <div&g ...

javascriptreactjsuse-refusecallback

Arranging various JavaScript arrays

I've been working on a script using the Haversine formula, but I'm running into an issue where it always directs me to the first location in the array, no matter how many times I switch them around. Any suggestions? var locations = new Array( ...

javascriptarrayshtmlgeolocationhaversine

Searching and Sorting through JSON Data in React Native

I am currently expanding my knowledge in React Native and experimenting with filtering a JSON data set on a screen. My goal is to display only the filtered results on the screen. Would it be advisable for me to create a new component called FilteredTicket? ...

javascriptreactjsreact-native

What is the best way to send a JSON response from a Symfony2 controller?

I am utilizing jQuery to modify my form, which is created using Symfony. The form is displayed within a jQuery dialog and then submitted. Data is successfully stored in the database. However, I am unsure if I need to send some JSON back to jQuery. I am ...

phpjavascriptjsonsymfony

Deactivate the submit button when the form is not valid in angularjs

I am currently facing a challenge with my form that contains multiple input fields. To simplify, let's consider an example with just two inputs below. My goal is to have the submit button disabled until all required inputs are filled out. Here is wha ...

javascriptangularjsforms

The connections between children in the Highcharts Org chart are getting tangled up

I am facing an issue with the organization chart I created using highcharts. Specifically, at the 3rd level, the links are becoming merged or overlapped with other child links. The data for the chart is being sourced from an ERP system and contains informa ...

javascriptchartshighchartsorgchart

Calculating the product of two input fields and storing the result in a third input field using a for loop

There's a small issue I'm facing. I have implemented a For Loop to generate multiple sets of 3 input fields - (Quantity, Rate, Price). Using a Javascript function, I aim to retrieve the Ids of 'Quantity' and 'Rate', and then d ...

javascriptphpjqueryhtmlmysql

Identifying the Operating System of Your Device: iOS, Android or Desktop

I am in need of displaying different app download links based on the user's operating system. This includes IOS, Android, or both if the user is accessing the page on a Desktop device. I am currently utilizing React and Next.js for this project. Unfor ...

javascriptreactjsnext.js

Save the uploaded file in Express to a custom directory on the system, avoiding the project's public folder

I have successfully integrated React on the front end to upload a file and receive it in Express.js. However, when storing the file in Express, it is currently being saved in the public folder. If I need to save the files in a non-public folder located at ...

javascriptnode.jsreactjsexpress

Matching names with corresponding IDs from multiple arrays in React

In my React app, I am dealing with an array structure. There is one array that contains the ids of two other arrays, along with their respective names. The goal is to create a new array that combines all the necessary information. Here is a simplified vers ...

javascriptreactjsarraysfilterforeach

What could be causing the jQuery to not function on the live website?

I am currently working with asp.net mvc2 and have developed a project featuring impressive slideshows and menus. While everything runs smoothly on my local machine, I encounter issues with jQuery not functioning properly upon publishing and viewing through ...

javascriptjqueryasp.netasp.net-mvc-2asp.net-mvc-routing

Invoking a Vuex action inside another Vuex action

After transitioning to the Vuex store, I've been steadily moving forward. However, my current hurdle involves invoking an action from within another action in Vuex. My grasp on Vue.js is still a work in progress. Current versions Vue 3 Vuex 4 If nec ...

javascriptvue.jsvuejs3vuex4vue-devtools

Value comparison displayed in text boxes

Having two textboxes and a script to compare their values can sometimes result in unexpected behavior. For instance, when the value in Textbox2 comes from the database and it happens to be 0, it can cause issues. One possible solution is to allow Textbox1 ...

javascriptjquery

No entries found in the Nuxt/content module's array

<template> <div> <input v-model="searchQuery" type="search" autocomplete="off" placeholder="Search Articles" /> <ul v-if="articles.length"> ...

javascriptvue.jsnuxtjs

Adding a Javascript file to the requirejs-config.js file in Magento 2

How can I properly load a JS file using requirejs? <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> Here is my requirejs-config.js file: var config = { paths: { mod ...

javascriptphprequirejsmagento2model-viewer

What is the most effective method for accurately tallying the number of matches in a Datalist using the Input value as a reference

I have set up a datalist element with an associated input element for autocompletion in modern browsers: HTML code <input type="search" id="search" list="autocomplete" /> <datalist id="autocomplete"> <option value="c++" /> < ...

javascripthtmlautocomplete