0

According to this blog post it is possible to reference DOM elements as named properties of the window object (based on their name attribute). The above code shows that indeed the form can be accessed as window.aform. Yet why does it fail to find the property when iterating over all properties of window?

<html>
  <body>
    <form name='aform'>
    </form>
    <script>
     // get all properties, including non-enumerable ones: http://stackoverflow.com/a/8024294/274677
     function getAllProperties(obj){
       var allProps = [], curr = obj;
       do {
         var props = Object.getOwnPropertyNames(curr)
           props.forEach(function(prop){
             if (allProps.indexOf(prop) === -1)
               allProps.push(prop)
           })
       } while(curr = Object.getPrototypeOf(curr))
         return allProps
     }
     var findIn = function(x,y) {
       var ps = getAllProperties(x);
       for (var i = 0 ; i < ps.length; i++) {
         var propertyName = ps[i];
         try {
           if (x[propertyName]===y)
             return 'found as property ['+propertyName+']';
         } catch (e) {
           console.log('failed to read property ['+propertyName+'] due to: ['+e.name+']');
         }
       }
       return "not found";
     }
     console.log(findIn(window, window.aform));
     console.log(window['aform']===window.aform);
     console.log(window.aform);
    </script>
  </body>
</html>

When the above page loads, I see on the console:

not found
true
<form name="aform"></form>
Marcus Junius Brutus
  • 26,087
  • 41
  • 189
  • 331
  • I get the error `SecurityError: The operation is insecure.` when trying it in Firefox, in the `findIn` function when trying to read all properties in the window object. – Guffa Oct 05 '15 at 21:46
  • @Guffa I get a similar error when trying in Plunker: http://plnkr.co/edit/AAlQkzO5BYdwRR1f8NdL. I have been able to see the console output without exceptions when opening the file from Chrome from the local file system. – Marcus Junius Brutus Oct 06 '15 at 06:47
  • @Guffa updated the code (also in Plunker in the link given above) so that it doesn't fall off the loop when the `SecurityError` happens. – Marcus Junius Brutus Oct 06 '15 at 07:17
  • @Guffa latest Plunker: http://plnkr.co/edit/L78kPTqvwGSGgC20HcUV – Marcus Junius Brutus Oct 06 '15 at 07:28

1 Answers1

1

Some browsers add the form reference as a property to the window object, some only make it available so that you can read it like a property but it's not actually added as a property.

When I try it in Firefox it finds the property, but in Chrome, IE and Edge it's not found.

The safest way to get the form by name is by using the document.forms collection, where it's clearly defined that the forms are available.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • "only make it available so that you can read it like a property but it's not actually added as a property." How is this done? – Marcus Junius Brutus Oct 06 '15 at 10:51
  • @MarcusJuniusBrutus: Probably by letting the property reader read from other collections also, similar to how the `window.all` collection in earlier IE read from several other collections. For a precise answer to that you would need to dig into the actual implementation of each browser. – Guffa Oct 06 '15 at 12:31