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元素添加一個透明的背景顏色
(出現這種情況的原因還在查找中)

 

 

 

待續....