IE9相关兼容问题记录及处理

JS对象的某个属性是个方法的情况

不支持的写法
var obj = {
    fn(){}
}

解决
var obj = {
    fn: function(){}
}

IE9使用input type="file"相关问题

1：IE9不支持input属性placehoder属性

2：IE9input标签设置type="file" 的时候，点击不会拉起文件选择框，反而会产生聚焦光标
解决办法：给input 添加 unselectable="on" 属性

3：IE9 input type="file" 的标签，作为button标签的子元素，不能拉起选择文件的弹窗。
(为什么会产生这个原因还在查找中)

4：IE9不支持input file属性，所以获取不到e.files对象，所以不能通过src的形式实现预览功能
解决办法：
var files = 'dom对象' //不是jquery对象  input标签的dom对象
file.select(); //使input对象聚焦
var reallocalpath = document.selection.createRange().text; //获取到该文件在本地的位置
//通过css filter属性
//$img 你要将上传的图片显示的那个img标签
$img.css("filter",info.recordImgArr[j]);
$img.attr('src','data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');

5：IE9不支持input file属性，所以获取不到e.files对象，所以不能直接查看files.size大小属性
解决办法：
var files = 'dom对象' //不是jquery对象  input标签的dom对象
file.select(); //使input对象聚焦
var reallocalpath = document.selection.createRange().text; //获取到该文件在本地的位置
var size = fileSize(reallocalpath)
function fileSize(path){
  try{
    var fso = new ActiveXObject("Scripting.FileSystemObject");   
    fileSize = fso.GetFile(path).size;
    return fileSize
  }catch(e){
      alert(e+"\n"+"如果错误为：Error:Automation 服务器不能创建对象；"+"\n"+"请按以下方法配置浏览器："+"\n"+"请打开【Internet选项-安全-Internet-自定义级别-ActiveX控件和插件-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本（不安全）-点击启用-确定】");
     return window.location.reload();
  }
}

6：input标签type="file"时，只有触发选择文件才会拉起选择文件弹窗，导致在IE9中，触发区域特别小
解决办法：关键词 input file 自定义样式

7：在ie9上传文件中，因为使用的是vue框架，出现的问题是：上传一次以后，再次点击input按钮，不会拉起文件选择弹窗，
产生的原因是：input此时处于聚焦状态，(可能与file.select()有关)
解决办法：定义了一个隐藏的input标签，当上传文件成功以后，再聚焦到隐藏的input元素上，(单纯的让file元素失焦没有效果)

 

 

IE9 文件上传
html
<form action="" name="cardZForm" ref="cardZRefSubmit" target="formUpFile" enctype="multipart/form-data">
    <input @input="upFile($event,'cardZ')" ref="cardZRef" unselectable="on" accept="image/jpg, image/png, image/jpeg"  class="transparent style-upfile pointer" type="file">
</form>

隐藏的iframe标签
<iframe id="formUpFile" class="" name="formUpFile"></iframe>

js通信
window.addEventListener('message', function (e) {
    console.log(e.data)        //接受发送的数据
})
$("#formUpFile").load(function(){//获取iframe中的内容
    window.parent.postMessage('123','*') //将iframe发送到主页面
});

注释：
1：form里，enctype必须为mulitpart/form-data 一定要有name属性
2：上传的方法，可以在form写一个隐藏的input标签，type=submit，然后触发点击事件
    或者直接触发form的submit事件
3：手动设置form的action属性，如果接口与当前页面不是一个域名的情况
    $(that.$refs.cardZRefSubmit).attr('action',config.api_pass + '/ajax_reg/check_username')
    that.$refs.cardZRefSubmit.submit()
4：接口返回数据会存放在iframe内容

bug：现在取不到iframe的内容

 

 

 

 

小问题记录

1：点击a，button标签以后，会出现虚线边框
解决办法：outline：none

2：IE9使用定位position问题

问题描述：自定义了一个时间选择控件，通过使用定位及z-index的样式，将一个div覆盖在一个input上面，出现的结果是，当我点击div元素时，他会穿透到下层的input，从而使得input聚焦

解决办法：给div元素添加一个透明的背景颜色
(出现这种情况的原因还在查找中)

 

 

 

待续....