Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript: Overriding alert()

People also ask

What we can use instead of alert in JavaScript?

Add hidden div aligned with your elements and show the message on hidden div's instead of alert box.

What happens when JavaScript runs the alert () function?

One useful function that's native to JavaScript is the alert() function. This function will display text in a dialog box that pops up on the screen. Before this function can work, we must first call the showAlert() function. JavaScript functions are called in response to events.

Can I style alert in JavaScript?

The standard alert box in JavaScript does not provide the option to apply CSS. To style your alert box, you need to create a custom one first. The custom alert box will be created using jQuery and styles will be applied to CSS.

What is JavaScript alert ()?

The alert() method displays an alert box with a message and an OK button. The alert() method is used when you want information to come through to the user.


It's definitely "supported". It is your web page, you do whatever you want to with it.

I already did this to track analytics events without modifying a library but by sneaking into events.

Use the proxy pattern:

(function(proxied) {
  window.alert = function() {
    // do something here
    return proxied.apply(this, arguments);
  };
})(window.alert);

You can also bypass the call to the original function if you want (proxied)

More info here: JQuery Types #Proxy Pattern


Although most browsers support overriding it, be careful with what you're doing with it.

Since the default alert box blocks the execution thread, some libraries that rely on this behaviour might not work anymore (at best).

You should be a good citizen and avoid touching the native API. If you do, you could break things up, when using 3rd party code.

Yet, if you want to redefine the alert behaviour in a specific context, you could enclose it with an anonymous function, like this:

/* new funky alert */
function myFunkyAlert(msg) { 
    /* here goes your funky alert implementation */
    alert("Look ma!\n" + msg);
}

(function(alert) { // anonymous function redefining the "alert"

    /* sample code */
    alert("Hello World!");

})(myFunkyAlert);

There are no dangers in Overring alert function. Every browser supprts it.

for example:

// function over riding. Redirecting to Console with Firebug installed.
function alert(message) { 
    console.info(message);
} 

alert('This is an override.');

As said in many of the other answers, you can just override the function with

window.alert = null

or

window.alert = function(){}

however, this doesn't necessarily override the function on the prototype of the Window constructor (note the capital W), so the hacker can still type:

Window.prototype.alert.apply(window, ["You were hacked!"]);

therefore, you also need to override that function with:

Window.prototype.alert = null

or

Window.prototype.alert = function(){}

I think every Javascript implementation will support this, and there is no danger involved with it. It's commonly done to replace the plain OS-styled alert boxes to something more elegant with HTML/CSS. Doing it this way means you don't have to change existing code! The fact that it is possible makes Javascript awesome.


Ladislav.
For IE8 you can redefine alert() like this way

/** 
 * Definition of global attached to window properties <br/>
 */ 
    (function() {
      nalert = window.alert;
      Type = {
          native: 'native',
          custom: 'custom'
      };
    })();

/**
 * Factory method for calling alert(). 
 * It will be call a native alert() or a custom redefined alert() by a Type param.
 * This defeinition need for IE
 */ 
    (function(proxy) {

          proxy.alert = function () {
          var message = (!arguments[0]) ? 'null': arguments[0];
          var type = (!arguments[1]) ? '': arguments[1];

          if(type && type == 'native') {
           nalert(message);
          }
          else {
               document.write('<h1>I am redefiend alert()<br/>Alert say: '+message+'</h1>');
          }     
      };
   })(this);

and call as

alert('Hello, hacker!');
nalert('I am native alert');
alert('Hello, user!', Type.custom);