Search code examples
javascriptjqueryhtmlattrprop

Why is jQuery .prop() not working for 'allowfullscreen'?


According to the documentation, the jQuery .prop() method only works for selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked and defaultSelected.

But as far as I checked and tried, it is not working for the iFrame attribute allowFullscreen.

However, this attribute is boolean, so if I want to set it to either work or not, it is not possible to do so with jQuery .attr(), since the attribute is active as long as any value is set. So the only way is to either set the attribute or remove it (again) completely which is at least not the optimal way to go.


Currently, I need to set it as follows:

allowFullscreen ? $iframe.attr('allowFullscreen', 'true') : $iframe.removeAttr('allowFullscreen');

But it is somehow not working to normal/easy/logical way:

$iframe.prop('allowfullscreen', allowFullscreen);

Is this a bug or is this somehow intended?


Solution

  • For historical reasons, the distinction between HTML attributes and HTML properties is messy. XHTML, being actual XML, did properties like disabled="disabled" so that they would parse as valid XML. Luckily, HTML5 saved us from that hell.

    The MDN documentation refers to HTML properties (like disabled) as "Boolean" attributes.

    However, allowfullscreen is referenced as having a value that can be set to true rather than being a "Boolean" attribute. In other words, allowfullscreen is an attribute not a property.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Attributes

    allowfullscreen
    This attribute can be set to true if the frame is allowed to be placed into full screen mode by calling its Element.requestFullscreen() method. If this isn't set, the element can't be placed into full screen mode.

    "Boolean" is not mentioned. The value of "true" is another giveaway...

    https://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

    Note: The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

    If properties are ducks, allowfullscreen looks like a duck, swims like a duck, and quacks like a duck, but is not actually a duck.