termi / es5-dom-shim

Lightweight ES5 and DOM shim with IE6 and IE7 support

ES5 and DOM4 shim for all browsers with IE6 and IE7 support

based on:

• https://github.com/kriskowal/es5-shim
• https://github.com/paulmillr/es6-shim
• https://github.com/Raynos/DOM-shim

Status: Stable Beta

• Simple Demo Try it in IE7 (or in IE6 ¬_¬)! And take a look at the source
• Complex Demo Not working in IE6 due lack of CSS

Goal

• Normalizing the JS and DOM across all browsers
• Less code (eg less closures, reusable functions) & file size
• IE6+ support
• Include all we need from ES5, ES6 and DOM shim in one file
• Powerful customisation

Brief

• Add methods such [add/remove]EventListener, querySelector[All], setSelectionRange, etc in IE6+
• Add Element/Node properties such classList, children, [first/last]ElementChild, reversed, control, labels, etc in IE6+
• Add methods such insertAdjacentHTML (old FF), stopImmediatePropagation (Opera < 12) and properties reversed, control, labels, etc in W3C browsers
• Add ES5/6 methods in all browsers
• Add DOM4 methods append, prepend, after, before, replace, remove, match in all browsers
• Provide bugs fixing for DOM and ES in IE, Opera, Chrome, FF
• and more

Cost

• For W3C browsers: ~8KiB gziped
• For IE8: ~16KiB gziped
• For IE6/7: ~18KiB gziped

Caution !!!

• This lib is not about performance in IE < 9
• The a.ielt8.htc requests should respond with the mime type "text/x-component"
• That's all cautions

Installation

• For modern browsers: Add main script in head section

       <script src="a.js"></script>
  

• For IE8 support:

1. First[!] add a.ie8.js in head section

      <!--[if IE 8]>
      <script src="a.ie8.js"></script>
      <![endif]-->
   

2. Add a.js in head section

      <script src="a.js"></script>
   

• For IE6 and IE7, and IE8 support:

1. Add a.ie8.js and a.ielt8.js, a.js in head section

      <!--[if lt IE 8]>
      <script src="a.ielt8.js"></script>
      <![endif]-->
      <!--[if IE 8]>
      <script src="a.ie8.js"></script>
      <![endif]-->
      <script src="a.js"></script>
   

2. Put a.ielt8.htc to the root of your site

EXSTRAS

(pseudocode)

IF __GCC__INCLUDE_EXTRAS__ == false -> Broken Object.defineProperty and Object.defineProperties will be deleted

IF __GCC__INCLUDE_EXTRAS__ == true ->

• Exporting these objects to global (window)
  1. browser
  2. DOMStringCollection
  3. XHR from https://github.com/Raynos/xhr with customisations
• Extending objects
  1. Object.append(object, donor, [donor2, ...])
  2. Object.extend(object, donor, [donor2, ...]) (Object.append with overwrite exists properties)
  3. Object.inherits(Child, Parent)
  4. Array.prototype.unique()
  5. String.random(length)

Note: if you don't need Extras set GCC flag __GCC__INCLUDE_EXTRAS__ to false in a.js and recompile a.js using Google Closure Compiler (GCC online)

Customisation

In addition to __GCC__INCLUDE_EXTRAS__ GCC flag there are a bunch of over flags to enable/disable ES5/6 and DOM3/4 shims in a.js file. After set flags you need to recompile a.js using Google Closure Compiler (GCC online)

DEBUG

If GCC flag __GCC__IS_DEBUG__ == true -> Console fix from https://github.com/theshock/console-cap/blob/master/console.js

IE < 8 Same-domain limitation

IE requires that the .htc behavior file must be in the same domain as the HTML page which uses it. If you try to load the behavior from a different domain, you will get an "Access Denied" error. Note that the domain must be exactly the same; that means that http://www.foo.com is a different domain than http://foo.com. http://css3pie.com/documentation/known-issues/#x-domain

IE < 8 Solve Same-domain limitation

Russian instruction in extra/SameDomainLimitation.SOLVE_RUS.odt

Temporary testing

http://jsperf.com/es5-dom-shim-test

Known issues:

0. Lack of test cases
1. Same-domain limitation (can be solve only on server) for IE < 8
2. Incompatibility with http://code.google.com/p/ie7-js/ [working on it]

TODO

1. Tests
2. http://dvcs.w3.org/hg/url/raw-file/tip/Overview.html (https://gist.github.com/1384398 & https://gist.github.com/1235332)

License

MIT

es5-dom-shim's Issues

document.createElement bug

Hi, I always get an error in IE8 in shivedCreateElement function (https://github.com/termi/ES5-DOM-SHIM/blob/0.7/__SRC/a.ie8.js, l:2115) saying that this["orig__createElement"] is null.
I changed this["orig__createElement"] to document["orig__createElement"] and now it works for me.

FF failder Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor(KeyboardEvent.prototype, "location")

throw Error: Illegal operation on WrappedNative prototype object

Object.getOwnPropertyDescriptor(document.__proto__, "firstChild")

throw Error: Could not convert JavaScript argument

After the first call to this lookupGetter, function Object.getOwnPropertyDescriptor begins to work.

KeyboardEvent.prototype.__lookupGetter__("location");
Object.getOwnPropertyDescriptor(KeyboardEvent.prototype, "location");
document.__proto__.__lookupGetter__("firstChild");
Object.getOwnPropertyDescriptor(document.__proto__, "firstChild");

Array.prototype.find должен возвращать undefined, если элемент не найден

[].find(function () {}) → undefined

сейчас возвращает -1

fix [set/get/remove]Attribute

MDSN:
getAttribute method
setAttribute method
removeAttribute method

For resolve problems with properties and attributes in IE < 8, we can use second parameter in [get/remove]Attribute and third parameter in setAttribute.

var div = document.createElement("div");
div.testValue = 666;
div.setAttribute("testValue", "lolcat");
console.log("property value: " + div.testValue, " ", "attribute value: " + div.getAttribute("testValue"));

div.testValue = 666;
div.setAttribute("TESTVALUE", "lolcat", 1);
console.log("property value: " + div.testValue, " ", "attribute value: " + div.getAttribute("TESTVALUE", 1));

FF 3.6 Unable to override addEventListener

https://bugzilla.mozilla.org/show_bug.cgi?id=428229

"node.addEventListener("event", function)" throw Error in FF 3.6
shim doesn't work

Android 2.3.3–2.3.5 defineProperty exception

defineProperty при попытке добавить свойство remove для HTMLSelectElement.prototype выбрасывает исключение: «can not redefine property».
Тестировал на следующих устройствах устройствах: Samsung Galaxy Ace GT-5830 (Android 2.3.3) и HTC Wildfire (Android 2.3.5).

xhr2

if your doing an xhr2 shim

please make it a standalone module like with DelegateListener

Date constructor null

If you include a.js and run this code:
var myNumber = 42,
myString = "42",
myArray = [41, 42, 43],
myBoolean = true,
myDate = new Date();

console.log(typeof myNumber);
console.log(typeof myString);
console.log(typeof myArray);
console.log(typeof myBoolean);
console.log(typeof myDate);

console.log(myNumber.constructor);
console.log(myString.constructor);
console.log(myArray.constructor);
console.log(myBoolean.constructor);
console.log(myDate.constructor);

if (myArray.constructor == Array) {
console.log("We found an array");
}

Then console.log(myDate.constructor); logs:
null

Running the code without the library logs:
Date()

What is causing this and how can it be overcome?