Similar Question:
How to handle URL anchor change event in JavaScript
Can a JavaScript function be triggered by clicking on an anchor tag?
For example, if you visit www.site.com/index.html#function1, would function1 automatically run?
Similar Question:
How to handle URL anchor change event in JavaScript
Can a JavaScript function be triggered by clicking on an anchor tag?
For example, if you visit www.site.com/index.html#function1, would function1 automatically run?
To add functionality to the page, you can attach an onload listener and a click listener to the link that navigates to the anchor. When the event is triggered, you can check the window's current URL like this:
<body onload="checkHash();">
<a href="#foo" onclick="checkHash()">go to foo</a>
<br>
<a href="#bar">go to bar</a>
<p>something in between</p>
<a name="foo">foo</a>
<br>
<a name="bar">bar</a>
<script type="text/javascript">
function checkHash() {
// Use setTimeout to check the URL as it may not update immediately
window.setTimeout(doHashCheck, 10)
}
var doHashCheck = (function(global) {
return function() {
var fnName = window.location.hash.replace(/^#/,'');
console.log(fnName);
// fnName should be a function, not a host method
if (typeof global[fnName] == 'function') {
global[fnName]();
}
}
})(this);
function foo() {
alert('foo');
}
if (!window.console) window.console = {};
if (!console.log) console.log = window.alert;
</script>
</body>
Simply embedding it within the anchor tag won't work, but you can utilize the hashtag (location.hash) to trigger your function instead
$(document).ready(function() {
//Retrieve hash value from URL. For example: page.html#Section2
var hashValue = location.hash;
if (hashValue == '#Section2') {
//Execute instructions here
}
});
Calling the javascript in that manner is not possible, however, if you have access to the other site, you can monitor the URL during the body Load event and trigger a script accordingly.
I am attempting to simulate a resize event using vanilla JavaScript for testing purposes, but it seems that modern browsers prevent the triggering of the event with window.resizeTo() and window.resizeBy(). I also tried using jQuery $(window).trigger(' ...
For example, I have a variable called myid, and its value is "abc xyz". Then, I use a function to escape metacharacters and assign the result to another variable like this: var x = "#"+escapechars(myid);. The evaluated value of x is #abc\\xyz. ...
After successfully deploying this basic smart contract using Remix, I encountered an issue when trying to interact with it through web3.js in my upcoming app. I used the evm version: paris for deployment and everything worked smoothly on Remix IDE. Here i ...
I've been attempting to implement server-sent events in order to fetch data from a database and dynamically update my HTML page whenever a new message is received. Here's the code I'm using: function update() { if(typeof(Event ...
For my project, I am looking to dynamically add specific elements like buttons. However, every time a new button is added, the function call for the old button gets duplicated. var btnElem ='<button type="button"class="doSomething">Button< ...
My custom interface for designing themes includes various properties such as colors, border radius, navbar settings, and typography styles. interface ThemeBase { colors: { [key: string]: Color; }; borderRadius: { base: string; mobile: st ...
I am encountering an issue when trying to import a component from 'Material-Ui'. I am currently working with React and Webpack. My goal is to utilize the "Card" component (http://www.material-ui.com/#/components/card). The import statement for C ...
While developing a web application in react.js, I encountered errors that I couldn't solve despite trying various solutions found online. The console displays the following error: Error in Console: Uncaught Error: Cannot find module 'path' ...
Recently, I encountered an issue with my custom search bar overlapping some controls on my map. Despite adjusting the z-index of these controls, they continued to stay on top. To work around this problem, I thought about hiding the controls during the sear ...
In my React and Material UI project, I am facing an issue where I want to check all checkboxes in a list by simply checking one checkbox in a parent component. Despite passing down the correct value of the parent checkbox through props, the visual changes ...
https://i.stack.imgur.com/7SxaL.gif Is there a way to create a hover effect similar to the one shown in the gif? Currently, I am able to zoom it on hover but how can I also incorporate buttons and other details when hovering over it? This is what I have ...
When it comes to importing or requiring JSON (.json) files in TypeScript code, there have been multiple questions addressing similar issues. However, my query specifically pertains to requiring a JSON file within an ES6 module that is transpiled to the cur ...
My understanding was that decorators in TypeScript are invoked after the constructor of a class. However, I recently learned otherwise. For example, the primary response on this thread suggests that Decorators are called when the class is declared—not wh ...
I have two different fiddles: Fiddle A and Fiddle B (both using Vuejs version 2.2.4) In my code, I have a computed property that can be changed programmatically by utilizing the get and set methods. Expectations for the Computed Property: If the def ...
Is there a way to utilize adal.js within AngularJS to obtain a bearer token for the audience https://management.azure.com through JavaScript? I have created a client application in Azure AD and configured its permissions to allow access to the "Windows Az ...
Looking for a way to disable a button using React code? Take a look at the snippet below: todos.filter(todo => todo.completed === true) .map(todo => todo.id) .includes(this.state.checkedIds) But there's a catch - it always seems to return ...
Having trouble playing a user-uploaded video using the <video tag. The video doesn't seem to load into the DOM properly. Here's the code snippet: function Videos ({uploadedFiles}){ if (uploadedFiles) { console.log(uploadedFile ...
I have a task that requires me to use setInterval function 5 times every 15 minutes, totaling one hour of work. Each value retrieved needs to be displayed in an HTML table. Below is the table: enter image description here For example, if it is 7:58 p.m. ...
Take a look at this illustration showcasing a sublime text view with dual columns for focus groups: ...
I am working on an Angular 1.x application (using ES5) where I need to display formatted CSS and JS code for the user to copy and paste into their own HTML file. The code should include proper indentations, line-breaks, etc. Here is a sample of the code: ...