Develop Reference

window.scrollTo not working consistently after window.onload (timing issue?)

I'm hoping someone can explain to me this odd behavior I'm seeing with window.scrollTo.
This doesn't work.
document.addEventListener('DOMContentLoaded', function() {
console.log('window.scrollY = ', window.scrollY);
window.scrollTo(0, 200)
console.log('window.scrollY = ', window.scrollY);
});
... well it does work, sort of ...
It works for the initial page load, but not refreshes (cmd + shift + r)...
The console output is:
window.scrollY = 0
window.scrollY = 200
So in that sense its working... except the page isn't scrolled, and when you type window.scrollY into the dev console it does indeed show 0.
So it would appear that the scroll is being set too early?
Where I get real confused is here:
var delay_ms = 0;
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
window.scrollTo(0, 200);
}, delay_ms);
});
SOMEHOW THAT WORKS, but not consistently.
However...
var delay_ms = 10;
Increasing the delay, even by only 10ms, improves the consistently dramatically! To the point where it hasn't failed on me yet.
At first I thought maybe DOMContentLoaded was simply too early for height to be properly evaluated, so I switched the event I was listening for to:
window.addEventListener('load', function() { /* ... */ });
According to the MDN Docs for .onload
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
So I can't imagine what would be setting the scroll to 0, after I'm setting it to 200...
Does anyone have any insight into what is happening with this timing?
Covering my bases
Yes there is space to scroll.
Here's a gist with some full reproduction code.
I'm on a mac, using chrome.

get wrong value when window resize

First, I get the window width and minus something then assign it to a variable,
Second, I resize the window and want to get the value that is current window width minus something
but I get wrong value, it will alert two value one is right and another is wrong,I do not know why and how to fix it, help me, thx
my html code is
<p class="test">click me get value</p>
js is
(function(){
test();
$(window).resize(function(){
test();
});
}());
function test() {
var t = $(window).width()-74;
alert('one ' +t);
$(document).on('click', '.test',{t: t}, get);
}
function get(event) {
var l = event.data.t
alert('two ' +l)
}
the fiddle version is
http://jsfiddle.net/dxcqcv/xetbhwpv/1/

I am not sure what are the values you are expecting to get, but take a look at the resize function documentation on jquery api:
http://api.jquery.com/resize/
Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).
As you can see, some browsers will call resize only at the end of the resizing, but some other will keep calling your function on the process of resizing. This means you will get different values from your call when you are not resizing and while in a resizing operation.
I made some changes to your code in order to become cleaner. Please take a look at this jsfiddle using the developer console (press F12 on browsers):
http://jsfiddle.net/xetbhwpv/7/
$(document).ready(function(){
test();
$(window).resize(function(){
test();
});
});
function test() {
var t = $(window).width() - 74;
console.log('one ' + t);
$('.test').off('click');
$('.test').on('click', {t: t}, getInfo);
}
function getInfo(event) {
var l = event.data.t
console.log('two ' +l)
}
As you can see now, the last two XX messages are equal to the last resize messages.

Can it be determined if window.resizeTo will work?

Inside the Javascript console, if I execute:
m = window.open(location.origin);
m.resizeTo(400, 400);
The window will resize, but if I just execute:
window.resizeTo(400, 400);
then nothing happens. I understand the reason for this behavior. How can I detect situations where window.resizeTo will do nothing?

Approach 1:
You can use the window.opener property. If it's null, then you did not open that window and thus cannot resize it.
window.parent is intended more for iframes and the like.
Such as:
if (m.opener) {
m.resizeTo(400, 400);
} else {
// You did not create the window, and will not be able to resize it.
}
Approach 2:
ajp15243 brings up a good point, so one thing you could do is listen to the resize event and see if your resizeTo worked:
var resizeFired = false;
...
var triggeredResize = function() {
resizeFired = true;
m.removeEventListener('resize', triggeredResize);
}
m.addEventListener('resize', triggeredResize, true);
m.resizeTo(400, 400);
if (resizeFired) {
// Your resize worked.
}
I haven't been able to fully test this, but it's one potential approach nonetheless. For IE8 and below you may need to use attachEvent instead. Also as #Wesabi noted, the resize may fire for other events (and may fire if the user is resizing the window as the listener as attached), so it's best to execute this is the shortest time span possible.
Approach 3:
Another approach would be to call m.resizeTo(400, 400) and then check the window size to see if the current size is equal to what you set it to:
m.resizeTo(400, 400);
if (w.outerWidth != 400 && w.outerHeight != 400) {
// Your resize didn't work
}

The easiest thing to do would be checking if the window has a parent. if !window.parent, it means it's the main window which cannot be resized with JS, else you have your resize case.
Edit: Igor posted it before I found it: you want m.opener() not window.parent

MDN is a great JavaScript resource: https://developer.mozilla.org/en-US/docs/Web/API/Window.resizeTo
Since Firefox 7, it's no longer possible for a web site to change the default size of a window in a browser, according to the following rules:
You can't resize a window or tab that wasn’t created by window.open.
You can't resize a window or tab when it’s in a window with more than one tab.
SO, you need to detect if you are a child window:
https://developer.mozilla.org/en-US/docs/Web/API/Window.opener
if (window.opener) {
console.log('I can be resized');
} else {
console.log('I cannot be resized');
}

Safe way to interact with page's DOM from Overlay JS

I have a Firefox extension that detects whenever a page loads in the browser and returns its window and document. I want to attach some events (that launch functions in my addon's overlay) to elements in the page, but I don't know how to do this in a way that's safe.
Here's a code sample:
var myExt = {
onInit: function(){
var appcontent = document.getElementById("appcontent");
if(appcontent){
appcontent.addEventListener("DOMContentLoaded", this.onPageLoad, true);
}
},
onPageLoad: function(e){
var doc = e.originalTarget;
var win = doc.defaultView;
doc.getElementById("search").focus = function(){
/* ... 'Some privelliged code here' - unsafe? ... */
};
}
};
So can anyone tell me what's the safe way to add these events/interact with the page's DOM?
Thanks in advance!

I think that you want to listen to the focus event, not replace the focus() function:
doc.getElementById("search").addEventListener("focus", function(event)
{
if (!event.isTrusted)
return;
...
}, false);
Usually, there is fairly little that can go wrong here because you are not accessing the page directly - there is already a security layer (which is also why replacing the focus() method will have no effect). You can also make sure that you only act on "real" events and not events that have been generated by the webpage, you check event.isTrusted for that like in the example code. But as long as you don't unwrap objects or run code that you got from the website, you should be safe.

Why does IE8 hangs on jquery window.resize event?

I discovered a problem that seems to reproduce always when opening a piece of html and javascript in IE8.
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function() {
console.log('Handler for .resize() called');
});
});
</script>
<div id="log">
</div>
</body>
</html>
Loading this file in IE8 and opening Developer Tools will show that the log message is printed continuously after one resize of the browser window.
Does anyone has an idea why? This is not happening in IE7 or IE9, nor in other browsers (or at least their latest versions).
UPDATE
One solution to prevent the continuos trigger of resize() is to add handler on document.body.onresize if the browser is IE8.
var ieVersion = getInternetExplorerVersion();
if (ieVersion == 8) {
document.body.onresize = function () {
};
}
else {
$(window).resize(function () {
});
}
But this does not answer my question: is the continuous firing of resize() a bug in IE8?

If "show window contents while dragging" is switched on, you will be inundated with resize events. I guess you're testing IE8 on a separate Windows machine which has this effect enabled (Display Properties -> Appearance -> Effects...).
To counteract this, you can wrap & trap the resize events to tame them: http://paulirish.com/demo/resize
This article says Chrome, Safari & Opera suffer from this too.

I only see the issue you are describing if an element on the page is resized (as described in this question). Your example doesn't work for me, but I assume for you it is appending the console message in the log div that you have there, which means that it is resizing the div and triggering the window resize event.
The answer that Lee gave is correct, but the method in the link didn't work for me. Here's what I did:
var handleResize = function(){
$(window).one("resize", function() {
console.log('Handler for .resize() called');
setTimeout("handleResize()",100);
});
}
handleResize();
This way, the handler is unbound as soon as it fires, and is only re-bound after you've finished all your actions that might re-trigger a page resize. I threw in a setTimeout to provide additional throttling. Increase the value in case your scripts need more time.