Alternate text for iframes

The <iframe> element doesn't support an alt attribute, but it does support longdesc. Still, the HTML specification does not dictate how browsers handle long description (or alternate) text. The only way to guarantee any specific behavior is to use JavaScript. Here is an untested example using jQuery:

// Not tested
$('iframe').each(function() {
  if ($(this).attr('href') == '') {
    // Do something with $(this).attr('longdesc')
  }
});

While not the "cleanest" solution, another option is to use position and z-index in your CSS to "hide" an empty image under the iframe. This will give you all of the meta-data advantages of true alt text without needing to go into any complex scripting.

It's also good if you just want it as placeholder to display until the iframe is done loading.


Since my first attempt misunderstood your question, let's try this instead:

<script>
$(function () {

    $("iframe").not(":has([src])").each(function () {

    var ifrm = this;

    ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;

    ifrm.document.open();
    ifrm.document.write($(this).attr("alt"));
    ifrm.document.close();

    });

});
</script>

This will read the "alt" tag value for any iframe with either no src attribute or a src attribute with a blank value, and write the alt text into the body of that iframe.

Assist from Write elements into a child iframe using Javascript or jQuery

Tags:

Html

Iframe

Jsp

Alt