IE9：无法在Internet Explorer 9下的弹出窗口中加载图片 [英] IE9: can't load image inside canvas in popup window under internet explorer 9
问题描述
function openNewWindow （ id ， width ， height ， 图像 ， imageWidth ， imageHeight ）{'<！doctype html>< html>< head>< meta http-equiv =" X -UA-Compatible"content =" IE = edge" /> < / head>< body>'
var screen = window 。 open （ '' ， id ， 'scrollbars = yes，width =' + w宽度 + '，height =' + height ， true ）;
screen 。 document 。 write （
+'< div id =" screen" style =" width：' + width + ';高度：' + height + '; margin：auto;">'
'< canvas id =" screenCanvas" width =' + width + 'height =' + 高度
'style =" border：2px solid＃000000;颜色：＃000000;"> < / canvas>< / div>< / body>< / html>' ）;
var canvas = screen 。 document 。 getElementById （ 'screenCanvas' ）;
var context = canvas 。 getContext （ '2d' ）;
var imageY = 0 ;
var imageX = 0 ;
var counter = 0 ;
$ （ canvas ）。 ready （ function （）{ for （ var i = 0 ; i < 4 ; i ++）{ for （ var j = 0 ; j < 4 ; j ++）{ var img = 新 图像 （）;
img 。 onload = （ function （ img ， imageX ， imageY ， imageWidth ， imageHeight ）{ 返回 功能 （） { context 。 drawImage （ img ， imageX ， imageY ， imageWidth ， imageHeight ）; } }）（ img ， imageX ， imageY ， imageWidth ， imageHeight ）;
img 。 src = " myServer / images /" + images [ counter ]; imageX = imageX + imageWidth ; counter ++; } imageY = imageY + imageHeight ; imageX = 0 ; } }）;
}
其中images是一个字符串数组，
每个字符串代表一个图像名称
问题：
此代码在firefox，google chrome，safari上工作正常，但它无法在Internet Explorer 9上运行，我知道IE9支持画布，并且它绘制一个空画布（因为我把边框放到画布上，当我触发弹出窗口时它会出现）但是为什么这个代码
在IE9上不起作用？
当我点击F12时，当浏览器尝试加载图像时，控制台中会出现此错误
SCRIPT5022 ： 异常 thrown 和 不 caught
index 。 html ， line 1 character 1
注意： 我试图在不在弹出窗口中的同一页面中绘制此画布，它工作正常并加载图像，但在弹出窗口中窗口没有。我需要图像以弹出窗口显示。
i认为它是IE9下的安全问题，或者它正在加载图像一个（可能是在加载完画布之前加载图像）。
任何帮助？
http://stackoverflow.com/questions / 11258337
http://stackoverflow.com/questions/11167468
$
$
查看源luke ...画布仅在html5文档中支持...
空文档不使用DTD ...
关于：空白和''渲染为< html>< / html> ...
所以你必须开始来自根元素（html）和
document.write（'<！doctype html>< html>< head>< title> some titile< \ / title> < body>< canvas id = \" mycanvas \">< \ / canvas>< \ / body>< \ / html>'）
$ b $使用模板html5文档将画布内容放入...
window.ope n（'templatehtml5.htm'，{target}，{options}）;
function openNewWindow(id, width, height, images, imageWidth, imageHeight){'<!doctype html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge" /></head><body>'
var screen = window.open('',id,'scrollbars=yes, width='+ width +',height='+ height ,true);
screen.document.write(
+'<div id="screen" style="width:' + width + '; height:' + height + '; margin: auto;" >'
+ '<canvas id="screenCanvas" width=' + width + ' height=' + height
+ 'style="border:2px solid #000000;color:#000000;" ></canvas></div></body></html>');
var canvas = screen.document.getElementById('screenCanvas');
var context = canvas.getContext('2d');
var imageY = 0;
var imageX = 0;
var counter = 0;
$(canvas).ready(function(){
for (var i=0;i<4;i++){
for (var j=0;j<4;j++){
var img = new Image();
img.onload = (function(img, imageX, imageY, imageWidth, imageHeight){
return function() {
context.drawImage(img,imageX, imageY, imageWidth, imageHeight);
}
})(img, imageX, imageY, imageWidth, imageHeight);
img.src = "myServer/images/" + images[counter];
imageX = imageX + imageWidth;
counter ++;
}
imageY = imageY + imageHeight;
imageX = 0;
}
});
}
where images is an array of strings, each string represent an image name
Problem:
this code works fine on firefox, google chrome, safari, but it didn't work on internet explorer 9, i know that IE9 supports canvas, and it draw an empty canvas (since i put a border to the canvas and it appears when i fire the popup window) but why this code didn't work on IE9?
when i click F12 this error appears in the console when browser try to load images
SCRIPT5022: Exception thrown and not caught
index.html, line 1 character 1
Note: i tried to draw this canvas in the same page not in a popup window, it works fine and it load the images, but in popup window not. i need image to display in popup one.
i think it is a security issue under IE9 or it is loading images one (may be it load images before finish canvas load).
any help?
http://stackoverflow.com/questions/11258337
http://stackoverflow.com/questions/11167468
view the source luke... canvas is only supported in html5 documents...
an empty document does not use a DTD...
about:blank and '' render as <html></html>...
so you have to start from the root element (html) with
document.write('<!doctype html><html><head><title>some titile<\/title><body><canvas id=\"mycanvas\"><\/canvas><\/body><\/html>')
or
use a template html5 document to place your canvas content into...
window.open('templatehtml5.htm', {target},{options});
这篇关于IE9：无法在Internet Explorer 9下的弹出窗口中加载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
