Questions tagged [html5-history]
The HTML5 History API allows programmatic manipulation of the browser's history through JavaScript, providing a method of managing the user's history stack when creating web applications.
608
questions
1
vote
1
answer
19
views
i cant seem to load fonts using the unicodes
when i load a default icon(box) is loaded in placement of the icon i wish to use(a searchbox).
The icon i am using is from fontawsome and its my first time using it. I tried using google fonts and got ...
0
votes
0
answers
31
views
How to return an empty pushState (or clear the current state) when fetching the index page
I am trying to turn a Tumblr site into a single page application.
Currently my page links work, I parse the href attribute for each link, fetch the corresponding page, then update the pushState as ...
0
votes
0
answers
30
views
How to properly use a counting loop in Javascript +HTML [duplicate]
In Javascript, I am trying to create a counting loop that adds one to a number. I am new to counting loops in the context of Javascript, but i tried my best and found something from the Internet.
This ...
0
votes
2
answers
39
views
Replacing history.pushState to send events (getting Ilegal invocation error)
I have a lib which is added in a SPA project which uses router.push(which will eventually call window.history.pushState) to make the url changes.
However I need my lib to be able to listen to these ...
0
votes
0
answers
52
views
Userpilot (history.pushState({}, "", e), history.pushState({}, "", window.location.href), history.back())
I use external library in react app and there are some actions that opens another pages.
When I click to button with url e.g "/dashboard/reviews" it goes to "/dashboard/reviews" in ...
0
votes
0
answers
48
views
history.pushState: Back button until history at "first" entry, then default back button behaviour
I want to build a reload-free page navigation with javascript and AJAX without a framework. Wether that is a good idea or not doesn't really matter as this project is rather for demonstration, that ...
1
vote
0
answers
36
views
how to reset browser's history stack by navigating to new URL(ReactJS) [duplicate]
I have a scenario.
I want to reset the browser history stack, when a user logs in.
this is stack now
index->login->dashboard
As soon as the user logs in, I want the stack to just contain /...
0
votes
1
answer
56
views
maintain state within div when back or forward button is clicked (html5 pushState)
Regarding on html5 pushState, when back button was clicked, url was able to reflect the changes required but div in-within did not able to show the old info, this also applies to forward button.
I am ...
1
vote
1
answer
1k
views
Why isn't the browser restoring the previous page's scroll position on back button click?
I work on a relatively simple e-commerce type website using HTML and JS, no React/frameworks. We occasionally receive complaints from customers (using the mobile Safari browser specifically) that ...
0
votes
0
answers
32
views
history.pushState saving only last url required
I have a single page application with a function to load specific contents in a container div. Every time I request a page I add the requested url to the browser history to enable back browser to work ...
0
votes
1
answer
118
views
Vue v3 router on Apache website & HTML5 history mode with different base is not working correctly
I have a basic testing app with Vue v3 that I want to deploy on an Apache/php web server.
The app it is not served from the root but from a subfolder, 'test'.
I have followed the official docs https://...
0
votes
0
answers
17
views
Get pushState data/state when opening website from the browser History
Regarding window.history.pushState - the first parameter allows us to put some data, which is accessible on the popstate event.
Is it possible to get that state data when the user leaves the website ...
0
votes
0
answers
35
views
Javascript page navigation using history losing forward state
I have the following code fopr my page navigation. I have made a demo urls because this might not work in fiddle. Once initial url loads, I can go back and forward which works well. The problem is ...
0
votes
1
answer
213
views
Unable to detect manual URL change in address bar for SPA in jQuery
I'm trying to build a search engine UI as a single page application using jQuery.
I'm using fetch API for loading content and History API for navigation.
I want non-hashed urls.
I'm manually adding ...
0
votes
0
answers
25
views
why back button only change url once with onpopstate?
I use this function to trigger back button clicked.
with this code each time I clicked back button onpopstate triggerd but only once it changes the url and when I comment this then the problem is ...
0
votes
1
answer
263
views
React Router match path from query string fallback
I want to be able to serve a React app using React Router both on an Apache and NGINX server without having to change any default Apache/NGINX configs.
The problem is that the application will only be ...
0
votes
1
answer
114
views
Making smooth page transitions with fetch and History API
I am trying to make a website that has smooth page transitions using document.write after sending a fetch to the page and using history.pushState. It switches the default behavior of all anchor tags, ...
0
votes
1
answer
583
views
Best way to detect browser window changes like go back, url change, reload, close event
So I am working on a testing application and I need to call a finsihTheTest() function (i.e. this function finishes the test by saving answers, time and other information) whenever following ...
0
votes
0
answers
41
views
How to store data to variable in HTML code? [duplicate]
I am trying to store a value from a HTTP request into temperature. The value will be in the form of characters '1', '2', '3', '4', '5'.
After storing the temperature, I want to do some comparison. For ...
2
votes
0
answers
537
views
Vue-router not finding direct routes when deployed in Netlify
I have deployed an app in Netlify, the link is: https://www.fluento.net. The website is working correctly, but whenever I try to access for example https://www.fluento.net/start, I get 404 error. If I ...
0
votes
0
answers
32
views
Vue Router: add working history item without invoking push
I have a vue page that displays a set of components in a certain order. Loading the page with the order will display those elements in order, for example:
https://mysite/dashboard/e3e1e2
will display ...
1
vote
0
answers
470
views
Blazor state management with web history API
I'm working with blazor server app on .NET Core 3.1. I'm trying to store an object on the browser history state by using history web api with blazor JS interop. Then I can read that object once user ...
1
vote
1
answer
104
views
Switch slider (using a checkbox) is flickering with AJAX "back" history
The following code queries a state.json file on load and updates the slider switch. It uses fetch(...). It works.
When clicking on the text "Click on this text...", the top div is replaced ...
0
votes
1
answer
1k
views
Single-page-application with HTMX, URL browsing history and manual reloading of a page
I have an application with fixed header and footer (it is important that they are not reloaded when we navigate through pages). I use HTMX. The attribute hx-push-url allows to have browsing history ...
-1
votes
1
answer
43
views
Origin of the term 'HTML5 games'
What made HTML5 games named like that?
I checked out HTML5 in Wikipedia and it tells me that HTML5 provides Canvas. Are HTML5 games named by it?
0
votes
3
answers
321
views
what is data-info in html? [duplicate]
<!DOCTYE html>
<html lang="ae-ar">
<head data-info="f:msnallexpuser,muiflt13cf">
I am not understand the function of data info above
0
votes
1
answer
146
views
Ajax Loaded Content - Deeplinking URLs
On my WordPress website I have a custom page template containing a post grid (showing the titles only) and on click on the title it is loading the whole content of the post into a div without ...
0
votes
1
answer
953
views
Browser history broken when using push state
I have the following code in my application which tries to retrieve some data from a URL and then update the browser with the new URL.
const response = await fetch(url);
if (response.ok) {
...
...
2
votes
1
answer
2k
views
React-router: is there a way to use push from history to append a query string after this current path?
my current URL is /foo and I want to add a query string to it i.e. /foo?date=2022-02-15
The way I did is location.search = queryString and it works but it results in a full reload. I wanted to use ...
0
votes
1
answer
146
views
How do I save the page state with JavaScript execution results and restore it later?
I'm developing a chrome extension for YouTube. The extension writes alternative subtitles with different behavior. The subtitle file is taken from YouTube by the link.
In order for me to be able to ...
0
votes
0
answers
50
views
Tooling for examine browser window.history
On some (own) websites it would helpful to get a deeper look into the window.history stack of my browser. Is there a hidden feature, or extension, for major browsers to achieve this?
I will illustrate ...
1
vote
1
answer
686
views
ONFOCUS event alert calling multiple times
Hi Please find the below code and help to resolve the issue
<html>
<body>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+...
1
vote
1
answer
354
views
Navigation in Single App Application using google.script.history.setChangeHandler fails after refreshing the page (returns a blank screen)
DESCRIPTION:
When using "google.script.history.push" and "google.script.history.setChangeHandler" to create a Single Page Application (SPA), a blank screen is returned when ...
1
vote
0
answers
2k
views
How to have a useEffect that uses `router.push` and should only fire for `router.query.id` changes in a Next.js project
I need to transition between 2 routes in a NextJs app like the one on the following example:
FROM: /some-route?id=ID_1
TO: /some-route?id=ID_1&page=2
And I have a useEffect that does something ...
0
votes
1
answer
633
views
How to prevent history.back() to return back to external website?
So I am trying to make a back button using onclick="history.back()". But the thing is when I enter my website using an external link, and press the back button, it takes me back to the ...
0
votes
1
answer
2k
views
slider by Swiper js
This is an autoplay slider.I want to add blur effect on the image which once is passed and the upcoming image but not the first image. how I can do that? I also want to target the dynamic style ...
1
vote
2
answers
1k
views
Location.state is undefined on first time visiting a component?
I am passing state through history.push() on onClick event like so
<Component
onClick={
history.push({
pathname: path,
search: query,
state: { from: location....
0
votes
1
answer
313
views
previous HTML won't render with back button after history.pushState()
I have the below HTML which is served from GET /home and uses Javascript to hijack the form submit event in order to change the method from POST to DELETE. The server listening for requests to DELETE /...
1
vote
0
answers
65
views
Implementing push state with cached layout
I have a web application with a home page that contains a timeline feed like Twitter. A user can navigate to their notifications (by clicking a button) and what happens is the timeline feed is hidden ...
1
vote
0
answers
587
views
Load previous pages on top of the page when "history.back" (click browser back button)
The main achievement:
Load previous pages when going back from the detail product page to category/shop archive.
What I have done:
I have a WordPress/WooCommerce website where I have implemented lazy ...
0
votes
1
answer
399
views
how to use html5 history.pushstate with angular
I am writing some new feature for my web app. where i write some script, and load via some tag manager, so that when my script loads it will target some UI components and removes from the dom and ...
0
votes
1
answer
586
views
Why does the popstate event not fire?
I am trying to understand the popstate event in JavaScript and for that I created this simple AJAX-based navigation website.
Here's home.html:
<!DOCTYPE html>
<html lang="en">
&...
1
vote
0
answers
316
views
history.pushState erases history after refresh if using confirm dialog
For some reason, the following code causes the page history to be erased, and I can't figure out why. I have two buttons that simply change the URL with history.pushState(). Button 1 sets the query ...
0
votes
1
answer
166
views
In React, can I check where the user will go with history.goBack()
I'm using react-query and I want to send the user back to the previous page when they save a form that triggers a query invalidation-- except in the case in which going back will send the user to the ...
1
vote
1
answer
1k
views
How to configure Vue router history mode in Apache
I'm getting this error when I try to add the line below on my /etc/httpd/conf/httpd.conf:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
...
1
vote
0
answers
197
views
Remove last entry from JavaScript history
I have a requirement where i have to remove the last entry (state) from the history of JavaScript.
My code is:
$(document).ready(function () {
history.replaceState(null, null, null);
})...
0
votes
1
answer
114
views
How to go to a new page by changing URL while continuing to run code?
I have a chrome extension that selects all the items on a page and clicks through them one-by-one. It then clicks on a few other buttons on the individual item pages.
allItems = document....
1
vote
1
answer
618
views
Is there any way to set filename for HTML video tag when we use src as YouTube video root URL
<video controls disablePictureInPicture >
<source src="https://r6---sn-uvu-2tme.googlevideo.com/videoplayback?expire=1609575422&ei=ntfvX_r4HcviogPYlqTYBw&ip=101.109.42.23&...
1
vote
1
answer
6k
views
Nginx and Vuejs 3 configuration with baseurl and public path
I have a VueJS app with a history mode. My website is example.com and the base URL of my app is my-app, and when you enter my app with example.com/my-app it works perfectly, you can navigate through ...
0
votes
1
answer
510
views
How to save an HTML form as draft and then retrieve and fill the rest on later time?
I have an html form that takes and stores information in MySql database using php. Lets call this form's file name as "form.php".
This form is called whenever we want to enter information of ...