javascript href clears Internet Explorer webpage

Question

javascript href clears Internet Explorer webpage

I noticed a strange issue with my HTML page. In Internet Explorer, when I click on the link, it displays the return value on a blank page. However, in Chrome, it simply executes the function without affecting the page appearance. Is there a way to make Internet Explorer behave like Chrome in this scenario?

<html>
  <body>
    <script type="text/javascript">
      function foo(){
        return true;
      }
    </script>
    <a title="call foo" href="javascript:foo()">return true</a>
  </body>
</html>

javascript internet-explorer

Answer 1

Answer №1

When it comes to the javascript: scheme URL, its purpose is to execute code that generates data, leading the browser to navigate accordingly.

If your intention is simply to trigger some JavaScript upon clicking something, avoid using a link.

Always choose the appropriate tool for the task at hand.

function foo(){
  return true;
}

document.querySelector("button").addEventListener("click", foo);

<button title="call foo">return true</a>

Answer 2

When it comes to the javascript: scheme URL, its purpose is to execute code that generates data, leading the browser to navigate accordingly.

If your intention is simply to trigger some JavaScript upon clicking something, avoid using a link.

Always choose the appropriate tool for the task at hand.

function foo(){
  return true;
}

document.querySelector("button").addEventListener("click", foo);

<button title="call foo">return true</a>

Answer 3

Answer №2

<html>
<body>
<script type="text/javascript">
function bar(){
  event.preventDefault();
  return false;
}
</script>
<a title="execute bar" href="javascript:bar()">return false</a>
</body>
</html>

Answer 4

<html>
<body>
<script type="text/javascript">
function bar(){
  event.preventDefault();
  return false;
}
</script>
<a title="execute bar" href="javascript:bar()">return false</a>
</body>
</html>

Answer 5

Answer №3

To prevent the default event of a hyperlink in a click event, you can utilize the event.preventDefault() method. Here's an example code snippet:

<script type="text/javascript">
    function bar(e) {
        event.preventDefault();
        ////get the href attribute.
        //var link = document.getElementById("link").getAttribute("href");
        ////display the page. You could also use "window.open(link)" to open a new tab for displaying the page.
        //window.location = link;
        return true;
    }
</script>
<a title="call bar" id="link" href="https://www.example.com/" onclick="bar(this);">return true</a>

Answer 6

To prevent the default event of a hyperlink in a click event, you can utilize the event.preventDefault() method. Here's an example code snippet:

<script type="text/javascript">
    function bar(e) {
        event.preventDefault();
        ////get the href attribute.
        //var link = document.getElementById("link").getAttribute("href");
        ////display the page. You could also use "window.open(link)" to open a new tab for displaying the page.
        //window.location = link;
        return true;
    }
</script>
<a title="call bar" id="link" href="https://www.example.com/" onclick="bar(this);">return true</a>

javascript href clears Internet Explorer webpage

Answer №1

Answer №2

Answer №3

Similar questions

How can you use a selector to filter Cheerio objects within an `each` loop?

The npm module parsing has encountered an error... It appears that a suitable loader is required to process this file format

establishConnection(); ^ TypeError: establishConnection is undefined

Verify whether an email is already registered in firestore authentication during the signup process using Angular

Tips for managing modal states in functional React components in React Native using React hooks

Next.js Server Error: ReferenceError - 'window' is undefined in the application

Using Javascript to navigate links in a list using keyboard arrow keys

Automatically adjust the top margin of the content section to accommodate a fixed header height

Guide to downloading a CSV file directly from a webpage built with vue.js

Removing HTML tags from a string while preserving specific tags in JavaScript

Does adding the Angular bootstrap script at the end of the body tag impact webpage speed more than using ng-app on the body tag?

jQuery sorting function is utilized to organize a table after its rows have been modified through an ajax

Struggling with modifying class in HTML using JavaScript

Display a specific tab section upon clicking using jQuery or JavaScript

There seems to be some odd behavior with the setIcon function in the Google Maps API

Error: A TypeError occurred with the startup because it was unable to read the property 'Collection' as it was

Iterate over the object to verify if the field contains an empty array, then output null

What is the best way to conceal my class element if the data-reviews number is under 5?

Issue with scrolling feature in div

The inner HTML functionality in Angular 2 seems to be malfunctioning when dealing with HTML tags