Why does document.GetElementsByClassName work on local drive but not on a network drive?

Question

(Already seen similar question but it isn't the same issue).

This is an HTML page intended to run in a browser locally (ie double-click the page in File Explorer), not served .

The page links to a simple JS file with a few functions. If the page and script are on a local drive, it works as expected. but when they are on a network drive, one of the functions fails with the exception 'Object doesn't support property or method 'getElementsByClassName'. The function is:

function DisplaySection(section)
{
  var sections = document.getElementsByClassName("SECTION");
  for (var i = 0; i < sections.length; i++)
  {
    sections[i].style.display = sections[i].id == section ? "block" : "none";
  }
}

To confirm: the JS functions are visible in both environments, and are properly connected to the document - I can step into the function that fails using F12 debugger.

Any pointers very welcome.

Answer 1

It's probably because of (in)Compatibility View in IE, which is on by default for intranet resources. And so IE goes into (in)Compatibility Mode, in which there is no getElementsByClassName .

You can try to get the IE policy* changed, or try to argue IE into submission with:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

( this answer claims that will work), or you can use querySelectorAll :

var sections = document.querySelectorAll(".SECTION");

querySelectorAll existed all the way back in IE8, whereas getElementsByClassName wasn't added until IE9.

* By "policy" I mean the Active Directory policy for your organization, which can determine this IE setting.

---

Or, of course, use a web browser that doesn't do stupid things by default . </rant>