安卓荣耀70 pro+、小米10下，webview打开h5，调用FontFace、new Image加载文件服务资源会出现异常
- FontFace直接报 Network error
- new Image必定走到onerror事件
- iOS设备正常
- 其他安卓设备正常
app中直接打开webview
app直接进入https://app.pre.bigfan.163.com/projects/art-design/tt-test进行测
测试代码
const TTTest = () => {
const successImage = 'https://cdn.pixabay.com/photo/2015/10/01/17/17/car-967387_960_720.png';
const errorImage = 'https://gcom.fp.ps.netease.com/file/62da98ef442e29a0abe49946pID7jXym04';
const loadImage = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, url: string, crossOrigin = '') => {
const i = new Image();
crossOrigin && (i.crossOrigin = crossOrigin);
const target = e.target as HTMLButtonElement;
i.onload = () => {
alert(`点击${target.innerText} load success`);
};
i.onerror = (err) => {
alert(`点击${target.innerText} load error !!!`);
console.log(err);
};
i.src = url;
};
const successFont = 'https://at.alicdn.com/t/font_985780_km7mi63cihi.woff';
const errorFont = 'https://gcom.fp.ps.netease.com/file/62a72e0e6d30e971cf7ab540W9qdxOrU04';
const loadFont = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, family: string, source: string) => {
const target = e.target as HTMLButtonElement;
new FontFace(family, `url(${source})`).load().then(
(res) => {
alert(`点击${target.innerText} load success`);
},
(err) => {
alert(`点击${target.innerText} load error !!!`);
console.log(err);
}
);
};
return (
<div className="tt-test">
<button
onClick={(e) => {
loadImage(e, successImage, 'anonymous');
}}
>
加载正常图片
</button>
<button
onClick={(e) => {
loadImage(e, errorImage, 'anonymous');
}}
>
加载异常图片
</button>
<button
onClick={(e) => {
loadImage(e, errorImage);
}}
>
加载异常图片（不设置cross origin）
</button>
<button
onClick={(e) => {
loadFont(e, 'successFont', successFont);
}}
>
加载正常字体
</button>
<button
onClick={(e) => {
loadFont(e, 'errorFont', errorFont);
}}
>
加载异常字体
</button>
</div>
);
};
小程序中web-view测试
异常图片加载
var i = new Image();
i.onload = () => {
console.log('image load');
};
i.onerror = () => {
console.log('image load error');
};
i.crossOrigin = 'anonymous';
i.src = 'https://gcom.fp.ps.netease.com/file/6318895f4efdc96734382c643aTf6Eem04';
正常字体加载
new FontFace(
'c17dd4ba57',
'url(https://at.alicdn.com/t/font_985780_km7mi63cihi.woff)'
)
.load()
.then(
r => {
console.log('font load');
},
r => {
console.log('font load error');
}
);
异常字体加载
new FontFace(
'test',
'url(https://gcom.fp.ps.netease.com/file/62a72e0e6d30e971cf7ab540W9qdxOrU04)'
)
.load()
.then(
r => {
console.log('font load');
},
r => {
console.log('font load error');
}
);
