Question

我使用canvas在 iframe 中显示一些报告，它在chrome中工作正常，但在firefox中显示以下异常

仅限firefox中的例外：

[Exception... "Failure"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: http://localhost:21292/IndexPage/VehiclebasedDashboard.aspx?vehicleNo=ALL :: getDashborddetails/< :: line 346"  data: no]

JSFiddle链接：

http://jsfiddle.net/ue9j9rfp/

以下是我的代码：

  var i = 0, j = 0,Empid = data[0].Empid;     
  var strokecolor = ["#7f8c8d", '#2ecc71', '#F38231', '#e74c3c', '#f1c40f'];
  var fillcolor = ["#7f8c8d", '#2ecc71', '#F38231', '#e74c3c', '#f1c40f'];
  $.each(data[0], function (key, value) {  
     $('#dv_veh_mn_usr').append('<canvas id="cnv_veh_usr_' + i + '"  width="100" height="100" class="cls_veh_cnvs ' + Empid + '_' + key + '">Browser not support, Please upgrade your browser</canvas>');
     var c = document.getElementById("cnv_veh_usr_" + i++);
     var ctx = c.getContext("2d");                        
     ctx.beginPath();
     ctx.arc(50, 50, 45, 0, 2 * Math.PI);
     ctx.lineWidth = 4;
     ctx.strokeStyle = strokecolor[j];
     ctx.fillStyle = fillcolor[j];
     **ctx.font = "30px Arial";**
     ctx.textAlign = "center"; 
     ctx.fillText(value, c.width / 2.1, c.height / 1.7);
     ctx.font = "10px Arial"; ctx.textAlign = "center";
     ctx.fillText(key.replace('V_', ''), c.width / 2.1, c.height / 1.7);
     ctx.stroke();
     (j < 4) ? j++ : j = 0;
  });

在 ctx.font 时会发生错误并跳转到外部捕获块

我在网上搜索但无法得到正确的解决方案。当我在单个页面中运行它时它工作正常，但当我在iframe中运行它时会发生上述错误

在firefox中获取canvas的异常

0 个答案: