IE中的Onload()处理程序没有响应

Onload() handler not responding in IE

本文关键字:程序 响应 处理 中的 Onload IE      更新时间:2023-09-26

我正在创建一个画布,并使用drawImage()绘制一个内联svg。一切正常,但由于以下问题,我被卡住了。。。

我的问题是加载处理程序在IE中没有响应??里斯在FF和chhrome工作。如何修复它以在IE 9以上版本中工作?

img2.onload = function() {
     console.log("load");
}

jsFiddle

function createme() {
      var test = $('<canvas />', { id : 'mycanvs' })
      $('#album').append(test);
      var svg2 = document.getElementById('sSource').innerHTML,
          vms = test[0], //canvas
          ctx2 = vms.getContext('2d');
      svgToImage(svg2);
      function svgToImage(svg2) {
        var nurl = "data:image/svg+xml;utf8," + encodeURIComponent(svg2),
            img2 = new Image;
          alert("just before onload")
          img2.onload = function() {
              console.log("load"); // does not show
          }
          img2.src = nurl;
      }
}

我目前没有运行IE VM,但根据他们的文档,必须在对象本身之前定义处理程序:

为了确保事件处理程序接收这些的onload事件对象,将定义事件处理程序的脚本对象放在并使用对象中的onload属性来设置处理程序。

我不明白为什么你的代码在IE中不起作用,但这个fiddle稍微调整了一下,所以在你创建图像对象之前就定义了你的处理程序。。。试试看:

function createme() {
      var test = $('<canvas />', { id : 'mycanvs' });
      var onloadHandler = function() {
          console.log("load");
      };
      $('#album').append(test);
      var svg2 = document.getElementById('sSource').innerHTML,
          vms = test[0], //canvas
          ctx2 = vms.getContext('2d');
      function svgToImage(svg2) {
        var nurl = "data:image/svg+xml;utf8," + encodeURIComponent(svg2),
            img2 = new Image;
          img2.onload = onloadHandler
          img2.src = nurl;
      }
      svgToImage(svg2);
}
createme();

https://jsfiddle.net/z769z7af/10/