IE10中幾個(gè)兼容性的處理 ( 'SCRIPT5022: SecurityError�

NoraXie 發(fā)布于2019-08-21 16:47 / 2333人閱讀

摘要：在對(duì)我們的項(xiàng)目進(jìn)行一些在中的基本功能測(cè)試時(shí)，發(fā)現(xiàn)以下兩個(gè)問(wèn)題對(duì)使用時(shí)出現(xiàn)錯(cuò)誤。的在中表現(xiàn)詭異在一個(gè)盒子中有多個(gè)子盒子，父子級(jí)都具有屬性，子級(jí)的層級(jí)并沒(méi)有按照的數(shù)值排列。公司開發(fā)們用的是，所以測(cè)試這個(gè)的時(shí)候把他的老年機(jī)帶了過(guò)來(lái)。

在對(duì)我們的PC項(xiàng)目進(jìn)行一些在IE10中的基本功能測(cè)試時(shí)，發(fā)現(xiàn)以下兩個(gè)問(wèn)題:

1. 對(duì)canvas使用toDataURL時(shí)出現(xiàn) "SCRIPT5022: SecurityError" 錯(cuò)誤。
2. css的z-index在IE10中表現(xiàn)詭異(在一個(gè)盒子中有多個(gè)子盒子，父子級(jí)都具有position屬性，子級(jí)的層級(jí)并沒(méi)有按照z-index的數(shù)值排列)。

公司開發(fā)們用的是Mac，所以測(cè)試這個(gè)的時(shí)候leader把他的老年機(jī)帶了過(guò)來(lái)。測(cè)試的環(huán)境是win8+360安全瀏覽器，選擇360的兼容模式，F(xiàn)12打開調(diào)試面板，調(diào)試面板的選項(xiàng)中還可以選擇IE版本。頁(yè)面路由跳轉(zhuǎn)時(shí)控制臺(tái)elements表現(xiàn)為html為空，有個(gè)雙箭頭的圖標(biāo)點(diǎn)擊可以使控制臺(tái)載入當(dāng)前頁(yè)面資源。

解決方案

IE10中的canvas在導(dǎo)出圖像數(shù)據(jù)時(shí)因?yàn)閳D像的跨域而產(chǎn)生的安全性錯(cuò)誤,以下是國(guó)際論壇上的解決方案

https://stackoverflow.com/que...

通過(guò)XMLHttpRequest可以解決這個(gè)問(wèn)題，以下是代碼

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    var url = URL.createObjectURL(this.response);
    img.src = url;

    // here you can use img for drawing to canvas and handling

    // don"t forget to free memory up when you"re done (you can do this as soon as image is drawn to canvas)
    URL.revokeObjectURL(url);
};
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.send();

這個(gè)問(wèn)題出現(xiàn)在上傳圖片時(shí)，如下的這種設(shè)計(jì)體驗(yàn)

一個(gè)input放在最上邊，值得注意的是在IE中input的type為file的表現(xiàn)為左半部分點(diǎn)擊為選中并顯示光標(biāo)，而點(diǎn)擊有半部分才為選擇文件操作，所以外套label來(lái)觸發(fā)input的事件，而把input定位在區(qū)域外使其無(wú)法被選中。呀，扯到別處了。說(shuō)那個(gè)層級(jí)問(wèn)題。當(dāng)時(shí)忘記截圖了，將就著看吧。
從上到下有三個(gè)子級(jí)，分別為label,p,img，層級(jí)則是由大到小，但是label在360中檢查元素卻無(wú)法被直接選中，多層時(shí)直接選中的層為較高層，所以也就點(diǎn)擊不到。哪位coder知道問(wèn)題所在的希望可以不吝賜教，而我最后給我的解決方案是給label的樣式中加入background: rgba(0, 0, 0, 0.02);，很神奇呢，偶然發(fā)現(xiàn)的，而且用transparent不行。
好了，廢話不多說(shuō)，就這么多了。碰到過(guò)同類問(wèn)題的coder，如果知道詳細(xì)的原因或者有更好的方案希望可以告知，先行感謝。