ترفندهاي طراحي وب - fix IE getElementById

You are here: خانه

ترفندها

Javascript Hacks

fix IE getElementById

شايد براي كمتر كسي اين عيب IE دردسر ساز بشه اما وقتي هم بشه حدس وجود اين باگ شايد كار ساده اي نباشه .
مشكل از اونجا پيش مياد كه دوباره IE هر كاري دلش خواسته كرده و استاندارد W3C رو رعايت نكرده .
بر طبق استاندارد موجود دستور getElementById() بايد المنتهايي رو برگردونه كه تنها خاصيت ID‌اونها برابر با مقدار مورد نظر باشه .
براي مثلا وقتي شما از اين دستور استفاده ميكنيد :

<script lnaguage="javascript">
var el = document.getElementById('fname');
</script>

المنتي كه ID‌اون fname هست در متغغير el قرار ميگيره .
اما مرورگر مايكروسافت براي اين كه شما بي نصيب نمونيد و يه خيري ببريد آخر سال كه هم هست دست خالي نريد نگاه ميكنه ميبينه المنتهايي كه خاصيت name اونها هم مچ بشه به عنوان جواب برميگردونه .
شايد در نگاه اول بگيد خوب اين كه خيلي هم بد نيست اما وقتي موقيعيتي كه براي من پيش اومد براي شما هم پيش بياد متوجه ميشيد كه باعث دردسر بسيار بزرگي هست .
مشكل اين بود كه فرمي طراحي كرده بودم كه برا اساس ID المنتها تصميم گيري ميكرد و مثلا براي مقدار boolean از دو دكمه راديويي استفاده ميشد . علاوه بر اين مقدار اون بايد براي سرور فرستاده ميشه و با نام yes و no .
اين صفحه در همه ي مرورگرها كار ميكرد اما در IE با مشكل يكي در ميون مواجه ميشد .
من كه آن زمان از وجود اين باگ اطلاع نداشتم كلي وقت صرف ديباگ كردن برنامه گذاشتم تا آخر با طرح يك مثال ساده متوجه شدم كه مشكل از IE هست .
به مثال زير توجه كنيد :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fix IE getElementById</title>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
  <label>
  <input type="text" name="txt1" id="txt1" />
  </label>
  <p>
    <label>
    <input type="text" name="txt2" />
    </label>
  </p>
  <p>
    <label>
    <input type="button" name="button" id="button" value="Button" 
    onclick="
    document.getElementById('txt1').value='the txt1 value';
    document.getElementById('txt2').value='the txt2 value';
    "/>
    </label>
  </p>
</form>
</body>
</html>

در صورتي شما دچار اين درد سر شديد از كد زير كه از بين برنده اين مورد غير استاندارد هست استفاده كنيد :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fix IE getElementById</title>
<script language="javascript">
if (/msie/i.test (navigator.userAgent)) {  // only override IE
   document.nativeGetElementById = document.getElementById;
   document.getElementById = function(id) {
      var elem = document.nativeGetElementById(id);
      if(elem) {
         // make sure that it is a valid match on id
         if(elem.attributes['id'].value == id)  {
            return elem;
         } else {
            // otherwise find the correct element
            for(var i=1;i<document.all[id].length;i++) {
               if(document.all[id][i].attributes['id'].value == id) {
                  return document.all[id][i];
               }
            }
         }
      }
    return null;
   };
}
</script>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
  <label>
  <input type="text" name="txt1" id="txt1" />
  </label>
  <p>
    <label>
    <input type="text" name="txt2" />
    </label>
  </p>
  <p>
    <label>
    <input type="button" name="button" id="button" value="Button" 
    onclick="
    document.getElementById('txt1').value='the txt1 value';
    document.getElementById('txt2').value='the txt2 value';
    "/>
    </label>
  </p>
</form>
</body>
</html>