javascript - window.history.back illegal invocation - Stack Overflow

admin管理员组

文章数量:1359424

Why is it that I can do this:

$("button").on('click', function(){window.history.back();});

however, when I try;

$("button").on('click', window.history.back);
/*or*/ $("button").on('click', history.back);

I get:

Uncaught TypeError: Illegal invocation
at HTMLAnchorElement.dispatch (jquery-1.12.4.js:5226)
at HTMLAnchorElement.elemData.handle (jquery-1.12.4.js:4878)

I was under the impression that when there is no retained context it defaults to the window object, which would allow me to do this?

Why is it that I can do this:

$("button").on('click', function(){window.history.back();});

however, when I try;

$("button").on('click', window.history.back);
/*or*/ $("button").on('click', history.back);

I get:

Uncaught TypeError: Illegal invocation
at HTMLAnchorElement.dispatch (jquery-1.12.4.js:5226)
at HTMLAnchorElement.elemData.handle (jquery-1.12.4.js:4878)

I was under the impression that when there is no retained context it defaults to the window object, which would allow me to do this?

• javascript
• jquery

Share Improve this question Follow asked Oct 22, 2017 at 21:41 ZzeZze 18.9k1414 gold badges9494 silver badges125125 bronze badges 12

• 1 jQuery expects function as second paramer – Kresimir Pendic Commented Oct 22, 2017 at 21:44
• 1 history.back() needs to be invoked with history as the context, not window. You'll get the same error if you try to run window.history.back.call(window). Regardless, jQuery will invoke the function with the element as context, so it doesn't even default to window – Lennholm Commented Oct 22, 2017 at 21:44
• 1 like @MikaelLennholm says, back is part of history, not window. so you would need to do history.back.bind(history) – Keith Commented Oct 22, 2017 at 21:47
• 1 @Zze No, it wouldn't work either because addEventListener also sets the element as the context for the handler function. – Lennholm Commented Oct 22, 2017 at 21:59
• 1 I strongly remend the approach you used in the first example in your question. Sure, you can use history.back.bind(history) instead, but there is no advantage to that. Your first example with the anonymous callback function that makes the call to history.back() is basically the canonical way to do this. It is much more clear than the .bind() version. Why make things more plicated than they need to be? The only improvement I would suggest to the first version is to split it into multiple lines in the usual manner so it's not so crowded. – Michael Geary Commented Oct 23, 2017 at 4:00

 |  Show 7 more ments

3 Answers 3

Sorted by: Reset to default 5

First of all, history.back() must be invoked with history as the context, if it defaults to window it will throw the error you describe. The issue here though is that jQuery invokes the handler with the element that has the event listener bound.

Your first line of code works because context is irrelevant to the anonymous function you pass as a handler. The fact that jQuery sets the element as the context doesn't matter since you correctly invoke history.back() inside of it.

Your working code calls history.back():

... window.history.back(); ...

That calls back() as a method of the history object, which simply means that inside the back function, this is a reference to history.

The non-working code gets a reference to the back function:

... window.history.back ...

and then passes the reference into jQuery's .on() method.

jQuery calls the function later in response to a click event, and this is set at the time of that call. jQuery sets this to the DOM element receiving the event.

So when the implementation of the back() function references this expecting it to be the history object, it gets the wrong thing.

In general, when you want an event listener to call a function that you didn't write, you're best off wrapping the call inside a function of your own as you did in your first example.

The history attribute of window simply references the History interface, and can only be invoked globally.

The failing method uses an element context, which has no history attribute.

本文标签： javascriptwindowhistoryback illegal invocationStack Overflow