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

Include an external JavaScript file within a component to display pictures in a web browser using Angular 2

Tips for selecting a checkbox with Puppeteer

Updating AngularJS: Removing the hashtag using history.pushState()

Guide on creating a Jasmine test for a printer utility

Tips for extracting a website's dynamic HTML content after AJAX modifications using Perl and Selenium

Can I receive a PHP echo/response in Ajax without using the post method in Ajax?

Merge two JSON objects together by matching their keys and maintaining the original values

Issues with splicing an Angular array using pure JavaScript

Problem with ngStyle: Error indicating that the expected '}' is missing

Encountering an issue with HTMLInputElement when trying to input an integer value into a label using JavaScript

Tips on placing a button at the bottom of the AppBar and keeping it fully responsive

In vue, pagination links are displayed as dots instead of numbers

Tips for expanding third-party classes in a versatile manner using Typescript

What is the best method for integrating UL / LI into JSON to HTML conversion?

Discovering the properties of a class/object in a module with Node.js

Refreshing a page will disable dark mode

The component in React does not refresh after updating the state

What is the solution to the error "Maximum update depth exceeded. Calls to setState inside componentWillUpdate or componentDidUpdate" in React?

"Exploring the world of jest.doMock: A guide to mocking

Please optimize this method to decrease its Cognitive Complexity from 21 to the maximum allowed limit of 15. What are some strategies for refactoring and simplifying the