Search This Blog

Saturday, August 27, 2011

Object doesn't support property or method 'createContextualFragment': Solved Internet Exporer 9 JavaScript Error


Object doesn't support property or method 'createContextualFragment'

I use a rich-text editor on my site, and received this JavaScript error when trying to view it on IE9. An easy solution exists, however, which I found in a discussion thread; simply add the following lines of code at the top of your file or before the method where you use createContextualFragment which makes it available to the Range object via prototyping.

if ((typeof Range !== 'undefined') && !Range.prototype.createContextualFragment) {
    Range.prototype.createContextualFragment = function(html) {
        var frag = document.createDocumentFragment(); 
        var div = document.createElement('div');
        frag.appendChild(div);
        div.outerHTML = html;
        return frag;
    };
}

5 comments:

  1. Thanks a million.....It worked perfectly for me...

    ReplyDelete
  2. where we have to place this code. New to Extjs

    ReplyDelete
  3. I've never used ExtJS, but you can always just save the contents above into a file with a js extension and include it at the top of all the pages that need the fix.

    For example, if I created a file named "createFragment.js" and pasted in the contents above, my HTML page would like this:

    <html>
    <head>
    <!-- CSS/style stuff -->
    <script type="text/javascript" src="createFragment.js"></script>
    <!-- other JS scripts>
    </head>
    <body>
    <!-- your web page content -->
    </body>
    </html>

    Of course, when you link to the file, the "src" attribute in your "script" tag has to point to the location where the file resides.

    ReplyDelete
  4. Alternately, you could just put it at the top of the page inside "script" tags; these comments don't allow formatting, but you get the idea...

    <head>
    <script type="text/javascript">
    if ((typeof Range !== 'undefined') && !Range.prototype.createContextualFragment) {
    Range.prototype.createContextualFragment = function(html) {
    var frag = document.createDocumentFragment();
    var div = document.createElement('div');
    frag.appendChild(div);
    div.outerHTML = html;
    return frag;
    };
    }
    </script>
    </head>

    ReplyDelete
  5. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me..I am a regular follower of your blog.
    Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from HTML5 CSS3 Javascript Online Training from India .
    or learn thru HTML5 CSS3 Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. HTML5 CSS3 Javascript Online Training from India


    ReplyDelete