Alternate text for iframes

Question

We have alternate text, alt attribute, for an img tag in HTML, which will show up when the image doesn't come up. I tried using the tag with iframe too.

<iframe src="www.abc.com" alt="Web site is not avaialable">

But the alternate text doesn't come up when src="" is given. Just wanted to know if I can achieve alternate text in any other way, if the src is not given ?

Answer 1

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

Answer 2

I don't know of a way to trap for 404 responses from an iframe in any kind of straightforward way, however you could trap it with some jQuery:

<iframe id="myFrame"></iframe>

<script>
$(function () {

  $.ajax({
     url: "http://www.abc.com",
     success: function (data) {
        $("#myFrame").html(data);
     },
     error: function () {
        $("#myFrame").html("Web site is not avaialable");
     }

});
</script>

Answer 3

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')
  }
});

Answer 4

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.