Menuitem And Contextmenu Crossbrowser Compatibility

Problem 1: I had made my own contextmenu using the following piece of code. function addFullScreenMenu () { var menu = document.createElement('menu'); var item = document.createEle

Solution 1:

Internet Explorer (up to version 8) used an alternate attachEvent method.

Internet Explorer 9 supports the proper addEventListener method.

if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }

Check this link. addEventListener in Internet Explorer

And another important link:

You shouldn't be using DOM 0 events (events attached via HTML attributes). You should use event listeners, attached using element.addEventListener in W3C browsers and element.attachEvent in IE. If you're building a large website, you should be using a JS framework, but that's a different question that you didn't ask. A framework (the most popular being jQuery) would provide abstract methods to do this, but in the absence of one, here's a simple function to do it cross-browser.

Event handler not working in Internet Explorer

This is a jsFiddle that i have build with your code. It's works with IE 9 (and it's the same code)

http://jsfiddle.net/bMW4k/1/

Solution 2:

You are using Mozilla-specific functions, namely .mozRequestFullScreen(); and .mozCancelFullScreen();.

The fullscreen API isn't fully implemented yet in many web browsers. If you want to use it, I recommend using a polyfill. Here's a good one: https://github.com/sindresorhus/screenfull.js/. (It's actually a wrapper, but it will do the job.)

With the polyfill included, your code would look like:

function addFullScreenMenu () {
    var menu = document.createElement('menu');
    var item = document.createElement('menuitem');
    menu.setAttribute('id', 'fsmenu');
    menu.setAttribute('type', 'context');
    item.setAttribute('label', 'Fullscreen');
    item.addEventListener('click', function (e) {
        if (screenfull.enabled) {
                screenfull.toggle(this);
        }
        else {
            alert("This browser doesn't support Fullscreen API.");
        }
    });
    menu.appendChild(item);
    document.body.appendChild(menu);
    document.body.setAttribute('contextmenu', 'fsmenu');
}