小程序webview内H5 FontFace、Image API 无法加载资源
294 浏览2022年11月23日作者:User7168674721670807563

安卓荣耀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');

    }

  );


最后一次编辑于 2022 年 11 月 23 日
2 条评论

相关文章

专题推荐

热门文章

热门问答