woo*_*gie 4 javascript internet-explorer
鉴于此代码
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);
在这个小提琴.如果你在Chrome和Firefox中看到div之后立即打开文件对话框,那么该模式的存在不会影响div的消失,但它会在IE(11)中发生.如果你等待div变得可见并且在IE中保持文件模态打开,div将无限期地保持可见,并且一旦你关闭div,似乎恢复执行JavaScript.
该文件选择对话框是脚本阻止在Internet Explorer中,类似于其他对话窗口像alert和prompt.像这样的脚本阻止对话窗口变得越来越少; 实际上,Xbox上的Internet Explorer甚至不支持它们 - Windows Web应用程序也不支持它们.
我创建了另一个演示来展示你在小提琴中的特效.每500ms data-*在<body>元素上更新一个属性,然后将其新值反映在::after伪元素的content属性中.在IE中,在浏览文件时暂停此过程.
请注意,这只是脚本的情况; CSS动画不会被阻止,因此可以利用CSS动画来调整布局或元素的显示,尽管脚本阻塞窗口.在您的情况下,您可以使用一个特殊的类,在短暂的延迟后淡出一个元素,或者只是在您希望隐藏的任何元素的不透明度上设置一个转换延迟.
我创建了另一个演示,以显示使用CSS动画的用法.
对话框是否应该阻止脚本编写的问题是我需要进一步研究团队的问题 - 我个人不知道这个行为目前是否已经规定.但是,Internet Explorer阻止编写脚本的原因之一是,当您完成选择后,我们将可以访问文件列表(以及其他内容).
考虑以下小提琴:
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;
}
在上面我们打算在关闭选择文件对话框后向您显示您选择的文件(并且可能会继续上传); 因此,我们利用它是一个同步脚本阻塞窗口这一事实.
在Chrome或Firefox中,我们无法立即浏览该control.files集合并构建所选文件的摘要列表.
我会继续研究这个; 事实上,我已经走下大厅,与负责DOM和Eventing的项目经理交谈,开始在这种情况下浏览Internet Explorer和Chrome/Firefox之间的区别.
我将在内部提交一个问题,让我们的团队进一步调查我们应该对此行为做些什么.在此之前,我希望这个答案可以帮助您在某种程度上找到不同实现之间的和谐.