Dialog blocks File-Chooser Scripts in Internet Explorer
Given this code
var body = $('body')
var div = $('<div>').appendTo(body);
div.text('this is text, yo');
var input = $('<input>').attr('type','file').appendTo(body);
var demo = function(cb,wait){
setTimeout(function(){ cb()},wait);
}
var alertMe = function(){
$('div')
.text('click on choose file!')
.fadeIn().delay(3000).fadeOut()
};
var wait = 3000;
demo(alertMe,wait);
into this script. What happens if you open the file dialog right after the div becomes visible in Chrome and Firefox, the presence of the modality does not affect the disappearance of the div, but it does in IE (11). If you expect the div to become visible and leave the file modal open in IE, the div will remain visible indefinitely, and as soon as you close the div, JavaScript seems to resume execution.
source to share
Understanding the problem
Internet Explorer script block file selection dialog box, similar to other dialog boxes such as alert
and prompt
. script-block dialog boxes like these are becoming less common; in fact Internet Explorer on Xbox doesn't even support them, nor Windows Web Applications.
I created another demo to show the effect you showed in your violin. Every 500ms, the attribute is data-*
updated on the element <body>
, which then has a new value reflected in the pseudo element's content property ::after
. In IE, this process stops when viewing the file.
Choosing an alternative approach
Note that this only applies to scripts; CSS animations are not blockable and can therefore be used to make layout adjustments or the display of elements despite script block windows. In your case, you can use a custom class that preempts the element after a short delay, or simply sets the transition delay to opacity of whatever element you expect to be hidden.
I created another demo to show the use of using CSS animation instead.
Why is Internet Explorer doing this?
The question of whether dialogue should discourage scripting is one that I will need to explore a little further with the team - I personally don't know if this behavior is currently spec'd or not. But one of the reasons Internet Explorer prevents scripting is that we will have access to the list of files (by the way) when you make a selection.
Consider the following script :
var button = document.querySelector( "button" ),
browse = document.querySelector( "input" );
button.addEventListener( "click", getFiles );
function getFiles () {
browse.click();
document.body.appendChild( getFileList( browse ) );
}
function getFileList ( control ) {
var list = document.createElement( "ul" );
for ( var i = 0; i < control.files.length; i++ )
list.appendChild( document.createElement( "li" ) )
.textContent = control.files.item( i ).name;
return list;
}
In the example above, we intend to show you the files you have selected (and presumably proceed to download them) after you close the Select Files dialog; as such, we take advantage of the fact that it is a script-blocking synchronous window.
In Chrome or Firefox, we won't be able to immediately launch the collection control.files
and create a summary list of the selected files.
Closing thought
I will continue to study this; in fact I was already walking down the hallway to speak to the program manager responsible for DOM and Eventing to start hashing the difference between Internet Explorer and Chrome / Firefox in this case.
I will write about the problem inside so that our team can continue to investigate what we should do with this behavior. Until then, I hope this answer helps you find harmony between the disparate implementations to some extent.
source to share