reload an javascript animation when resize the window

Question

I did a javascript animation in 3D with three.js and I want reload the page or the animation when I resize the window, so tried that:

window.addEventListener('resize', function(event){
    window.location.reload(true);
});

but it's didn't work... I need help

( I am a beginner in javascript)

It's not clear what you're really trying to do. Pretty much [all of the three.js examples](http://threejs.org/examples) support resizing so if you just want to handle resizing look at source of any of those examples. — gman, Oct 30 '16 at 10:13
I removed the webgl and three.js tags since the answer you accepted had absolutely nothing to do with either — gman, Oct 30 '16 at 12:10

score 1 · Accepted Answer · edited May 23 '17 at 12:00

1

Since you are trying to call this function on the resize of the window, you will want to bind the function to the window and not to the document. To support versions of IE that are less than 9, you will want to use attachEvent. Please note that attachEvent requires you to specify the on keyword. Here is an example:

P.s.: If you want to exact answer you should give more information about your browser and version.

if(window.attachEvent) {
    window.attachEvent('onresize', function() {
        alert('attachEvent - resize');
    });
}
else if(window.addEventListener) {
    window.addEventListener('resize', function() {
        console.log('addEventListener - resize');
    }, true);
}
else {
    //The browser does not support Javascript event binding
}

Similarly, you can remove events in the same way

if(window.detachEvent) {
    window.detachEvent('onresize', theFunction);
}
else if(window.removeEventListener) {
    window.removeEventListener('resize', theFunction);
}
else {
    //The browser does not support Javascript event binding
}

Source

Page reloading doesn't same for all browser. Because of that you should look these page reloading examples also. Javascript 1.0

window.location.href = window.location.pathname + window.location.search + window.location.hash;
// creates a history entry

Javascript 1.1

window.location.replace(window.location.pathname + window.location.search + window.location.hash);
// does not create a history entry

Javascript 1.2

window.location.reload(false); 
// If we needed to pull the document from
//  the web-server again (such as where the document contents
//  change dynamically) we would pass the argument as 'true'.

Source

edited May 23 '17 at 12:00

Community

1
1

answered Oct 29 '16 at 18:55

M S

2,455
1
9
11

window.location.replace(window.location.pathname + window.location.search + window.location.hash); work very well on chrome and firefox, thank you very much – sami54 Oct 29 '16 at 19:07
@sami54 Glad to hear my answer is useful for you – M S Oct 29 '16 at 19:10
Since the question is about `WebGL` IE9 arguably has no relevance since IE9 doesn't support WebGL – gman Oct 30 '16 at 10:11
That's not the point. The point is your answer is irrelvant to all browsers that support WebGL. All browsers that support WebGL are auto-updated. On on top of that all of them support all the latest JavaScript and HTML5. There's zero reason to check for JavaScript 1.1 or 1.2 or attachEvent on any browser that supports WebGL – gman Oct 30 '16 at 10:32
You're missing the point. Your answer works. It's just full of extraneous info that obfusicates your solution. There's no reason to worry about JavaScript 1.1 or 1.2 or attachEvent because the person is using WebGL so by definition they aren't targeting IE or old JavaScript – gman Oct 30 '16 at 10:52
@gman if you look sami54 comment for this answer, you can see JavaScript 1.1 solution is work for he. Anyway, I didn't take main point WebGL browsers have to use latest version of javascript. I have just focused location.reload is not work for any browser that's means browser have lower version of javascript. – M S Oct 30 '16 at 10:56
Find, then I'll remove the WebGL and three.js tags – gman Oct 30 '16 at 12:09
I didn't mean that this question related to WebGL and three.js. He asked location.reload does not work with my browser. Because of that I give different answer that is uncommonly used for location.reload. And this answer work. I didn't understand why you give down vote to my post. – M S Nov 01 '16 at 19:32

reload an javascript animation when resize the window

1 Answers1