History.replaceState() functionality in Opera 11.50 and beyond

Check out this javascript demonstration: http://fiddle.jshell.net/maple/JbEJN/show/ (for the code, refer to this link: http://jsfiddle.net/maple/JbEJN/).

This is a basic tab control created with JavaScript. Clicking 'Tab 1' reveals the contents of one section, while clicking 'Tab 2' hides the current section and displays another one with different content. This is a standard tab control system.

My goal is to use hashtags to bookmark or link directly to a specific tab on the page. However, I do not want a new browser history entry to be added every time I switch tabs. I don't want to go through multiple tabs when pressing the back button before reaching the previous page.

To achieve this functionality, I plan to utilize replaceState() to insert a hashtag into the URL whenever a tab is switched:

window.history.replaceState(null, '', '#tabname');

I expect that by using this method, switching between tabs will not create additional history entries. Instead, the hashmark in the URL will change accordingly. When I press the back button, I should simply return to the previous page without cycling through each tab.

While this approach works smoothly in Chrome, Firefox, and Safari, it seems to have issues in Opera versions 11.50 and 11.60. Despite Opera's claimed support for the history API, replaceState() functions like pushState(), resulting in unwanted history entries being generated.

Is this a bug specific to Opera, or is there a different technique required to implement the API properly in Opera?

javascriptoperabrowser-history

Answer №1

It appears that the click event's default action is to trigger the link when using replaceState(), resulting in the URL being updated, #tabname being added, and a history entry being created. To prevent this behavior, you can try using event.preventDefault(): http://jsfiddle.net/JbEJN/8/show/

It's interesting how your original code functioned correctly in Chrome and Firefox, suggesting they may not create a history entry if replaceState() has already modified the URL and the link activation doesn't alter it. If this is the case, Opera should align with their behavior. Feel free to report this as an issue on . Please provide me with the bug reference ID so I can follow up.

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

Objects remaining static

I'm currently working on a VueJS component that has the ability to export data into .xlsx format. To achieve this functionality, I am utilizing the json2xls library, which requires an array of objects with identical keys (representing column names) to ...

javascriptvue.jsjavascript-objects

Error 400: The onCreate Trigger function for Cloud functions is experiencing issues with HTTP requests due to errors in the request

I am encountering an issue when attempting to add a trigger for Firestore OnCreate, as the deployment fails with HTTP Error: 400 stating that the request has errors. Essentially, my goal is to write to a new document if a record is created in a different ...

javascriptnode.jsfirebasegoogle-cloud-firestoregoogle-cloud-functions

Using PHP to pass both string and integer values into a JavaScript function

I am attempting to pass both a string and an integer into the same function, but I am running into issues with quotes. After some troubleshooting, I realized that the problem lies in the echo $q->info part of my code - I need to use double quotations fo ...

javascriptphpajax

Unable to locate xpath during the second iteration or attempt

As a newcomer and hobbyist programmer, I have hit a wall with this particular issue. My goal is to loop through a website and extract data to print. While my code successfully retrieves data from the first link, I am struggling to make it "click" on the se ...

javascriptpythonselenium

Update the functionality of the Rotate library event

I'm attempting to incorporate this code for my animation: link to my animation My issue arises when I try to trigger the picture animation upon clicking a button, here is the HTML snippet: <form> <input type="submit" value="change" onclick= ...

javascriptjqueryrotation

I am having trouble updating a record in my database table

I am encountering an issue while trying to update a row in a table using a form. The add button works fine, but I am unable to update it using the update (a tag). Just a reminder: the edit button is located in the last column of each row along with the de ...

javascriptphpmysql

A fresh javascript HTML element does not adhere to the css guidelines

While attempting to dynamically add rows to a table using Javascript and jQuery, I encountered an issue. Here is my code: <script> $(document).ready(function(){ for (i=0; i<myvar.length; i++){ $("#items").after('<tr class="item- ...

javascriptjqueryhtmlcss

Accessing cell values within a table using JavaScript

I am having some trouble with extracting unique IDs from the input text areas in the first column of an HTML table. These IDs are dynamically assigned using JavaScript. Can someone help me with this issue? Below is the HTML code for my table: <table id ...

javascripthtmlhtml-table

Wordpress AJAX delivering empty response instead of intended string

I have tried everything, including adding die() at the end of my PHP function, but my ajax call is still returning zero. I went through other questions here but could not find a solution, so please review my code. This is the function I use to make an aja ...

javascriptphpjqueryajaxwordpress

Having trouble changing the style property of the `<div>` element in my JS function within Bootstrap Studio

I am currently utilizing Bootstrap in Bootstrap Studio along with plain JavaScript. One of the challenges I am facing pertains to changing the background color of a <div> element upon selecting a new tab. The objective is to dynamically alter the ba ...

javascripthtmlcssbootstrap-4bootstrap-studio

My goal is to exclusively create illustrations of items within a camera's view

Currently, I am using THREEJS to create a dynamically generated 'minecraft' world utilizing a perlin noise generator. Check out the progress so far: Block World Everything is going smoothly except that I am facing significant performance issues ...

javascriptthree.js

Guide to setting the hiddenfield value within a listview using javascript or jquery

Here is the javascript code that I am using to retrieve the value from my textbox with autocompleteextender. <script type="text/javascript"> function txt_lect_in_AutoCompleteExtender_itemSelected(sender, e) { var hdEmpId = $get('& ...

javascriptjqueryasp.netajaxtelerik

Exploring the function of variables in VueJS

I'm facing a tricky issue with VueJS as I am still getting acquainted with it. My objective is to access and modify variables within the data function, but so far, I haven't been successful. The problematic line: console.log('item: ' ...

javascriptvue.js

When located at the bottom of a page, the Div element fails to display

I need some help with my javascript code. I am working on creating a scrollable panel that closes when scrolled and reveals a #toTop div when the bottom of the page is reached. Below is the function code I have written, but for some reason, the #toTop div ...

javascriptjquerypanel

Passing key value pairs with jQuery's get method

For my project, I am developing a universal function that interacts with different types of data and executes ajax get requests based on the data. At times, I need to make a get request like this: {option1: 'delete', id: idToRemove}, and other ...

javascriptjqueryget

.populate() function malfunctioning

After hours of dedication, I am still unable to find a solution to my problem. I'm currently developing a school directory using a Student Model: const mongoose = require("mongoose"); const studentSchema = new mongoose.Schema({ name: String, ...

javascriptnode.jsmongodbmongoose

Troubleshooting Vue.js and Axios: Request Transformation Issue Resulting in Undefined Data

I recently implemented transformRequest and transformResponse functions to display a loader while my data is rendering. However, after adding these functions, I noticed that my POST and PATCH requests are not functioning properly. There are no error messag ...

javascriptvue.jsrequestaxios

How can I remove a specific item from obj?

Is there a way to create a function called removeStar that removes the star key from an object and outputs it in the format shown by the expectedOutput variable? let input = { "p": { "pk1": "pv1", "pk2": "pv2", "c": { "*": { ...

javascript

Apply a different class to a group of elements when hovering over them, excluding the element being hovered on

I need to blur multiple elements on my website when I hover over them, leaving only the hovered element in focus. Is there a more efficient way to achieve this? Currently, I have the following code: $(function() { $('#a').hover(function() { ...

javascriptjqueryhtmlhoveraddclass

Discovering inner arrays within an outer array using the Plus function

Apologies if these questions seem basic in terms of JavaScript. Challenge 1. I am attempting to write code that can identify an inner array within an outer array, and the structure of the array looks something like this; var array = ['Bob', [ ...

javascriptjqueryarraysfunctionanonymous