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 >

上面这个是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标签去掉了，就报错，具体报错的行是在Jcrop.js中的

 

    xx  =  x2;
    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标签又正常了，这个原因有待研究了。

    （完）

 

 

转载于:https://www.cnblogs.com/jmax/archive/2010/04/16/1713518.html