jQuery JCrop插件的一个问题
最近应项目需要用到了jQuery的JCrop插件，一个用JS裁减图片的功能，非常好用。但这几天发现了一个头痛的问题，在firefox下正常，但在IE下，无论是IE6不是IE7都出现“对象不支持此属性或方法”的错误，而且报错的行数是在插件的脚本本身里，真是有点摸不着头脑了。
代码代码
代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script language="Javascript">
var ratio = 152 / 163;
var url = 'css/flowers.jpg';
jQuery(window).load(function(){
jQuery('#cropbox').attr("src",url).load(function(){
$.Jcrop("#cropbox",{
onChange: showPreview,
onSelect: showPreview,
aspectRatio: ratio
});
});
});
function showPreview(c)
{
jQuery('#x').val(c.x);
jQuery('#y').val(c.y);
jQuery('#w').val(c.w);
jQuery('#h').val(c.h);
}
</script>
</head>
<body>
<div id="outer">
<div class="jcExample">
<div class="article" id="cropdiv">
<h1>Jcrop - Hello World</h1>
<img src="" id="cropbox" />
<form onsubmit="return false;">
<input type="hidden" id="x" name="x" /><input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" /><input type="hidden" id="h" name="h" />
</form>
</div>
</div>
</div>
</body>
</html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script language="Javascript">
var ratio = 152 / 163;
var url = 'css/flowers.jpg';
jQuery(window).load(function(){
jQuery('#cropbox').attr("src",url).load(function(){
$.Jcrop("#cropbox",{
onChange: showPreview,
onSelect: showPreview,
aspectRatio: ratio
});
});
});
function showPreview(c)
{
jQuery('#x').val(c.x);
jQuery('#y').val(c.y);
jQuery('#w').val(c.w);
jQuery('#h').val(c.h);
}
</script>
</head>
<body>
<div id="outer">
<div class="jcExample">
<div class="article" id="cropdiv">
<h1>Jcrop - Hello World</h1>
<img src="" id="cropbox" />
<form onsubmit="return false;">
<input type="hidden" id="x" name="x" /><input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" /><input type="hidden" id="h" name="h" />
</form>
</div>
</div>
</div>
</body>
</html>
上面这个是JCrop的一个简单例子，该示例在两个浏览器下都运行正常。但如果我把其中的
代码<form onsubmit="return false;">
<input type="hidden" id="x" name="x" /><input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" /><input type="hidden" id="h" name="h" />
</form>
<input type="hidden" id="x" name="x" /><input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" /><input type="hidden" id="h" name="h" />
</form>
换成
<input type="hidden" id="x" name="x" /><input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" /><input type="hidden" id="h" name="h" />
<input type="hidden" id="w" name="w" /><input type="hidden" id="h" name="h" />
把form标签去掉了，就报错，具体报错的行是在Jcrop.js中的
xx = x2;
h = rwa / aspect; //这行报,对象不支持此属性或方法 的错误.
yy = rh < 0 ? y1 - h : y1 + h;
h = rwa / aspect; //这行报,对象不支持此属性或方法 的错误.
yy = rh < 0 ? y1 - h : y1 + h;
真是困惑.调试了一下后发现,这里的"h"既然是一个对象，类型是DispHTMLDocument，查看其中的属性，发现是一个隐藏的input，name真好是h。所以估计是jQuery把页面上的name=h的input当作一个全局对象了。刚好jcrop.js中h没有定义成局部变量,所以要把一个Number类型的赋值给一个DispHTMLDocument对象就出现了“对象不支持此属性或方法”的错误。但是如果在input外围加上form标签又正常了，这个原因有待研究了。
（完）
