13

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 ?

Boaz
  • 19,892
  • 8
  • 62
  • 70
Anuj Balan
  • 7,629
  • 23
  • 58
  • 92

5 Answers5

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.

cryptic_star
  • 1,863
  • 3
  • 26
  • 47
nosajimiki
  • 241
  • 1
  • 3
  • 7
3

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

Community
  • 1
  • 1
Jake Feasel
  • 16,785
  • 5
  • 53
  • 66
  • What I've tested is: IFRAME Saved as:iframe.html. src when given, is coming. But when am not, altenate text aint cmg. – Anuj Balan Nov 24 '11 at 09:16
  • I cant test the code given by you by embedding in html ??? I mean, I cant test it like this ?? Sorry, novice at this. – Anuj Balan Nov 24 '11 at 09:21
2

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')
  }
});
Brandon Gano
  • 6,430
  • 1
  • 25
  • 25
1

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>
Jake Feasel
  • 16,785
  • 5
  • 53
  • 66
  • The only problem with this approach is that, unlike with a normal iframe src, the ajax will be limited to requesting urls under the same domain or that allow cross domain access via the Access-Control-Allow-Origin header. – Jake Feasel Nov 24 '11 at 05:54
  • I just want to show an alt text when src="" only. I dont want to trap 404 response. Will try the script you've given. – Anuj Balan Nov 24 '11 at 05:56
  • I've got no idea about ajax. I've tried an example but the iframe nor the text shows up. – Anuj Balan Nov 24 '11 at 06:03
  • When the src=""? Isn't that something you can detect on the server? In which case, you could control the output completely differently, like not showing the iframe at all, and instead some error message. – Jake Feasel Nov 24 '11 at 06:06
  • Am having a jsp in which an iframe is added and it will have src="". At this point of time, I need an alternate text to be displayed inside the iframe. Later, user will click on a button which will pop up text field where he will enter the url. This url should be put in the iframe and tested at that place. This is what am trying, and the code you've given, it aint working this way. – Anuj Balan Nov 24 '11 at 06:39
0

What about using an image with your alt info on it as the background of the div containing the iframe in question?

Or, better yet:

You should think about using an image with your alt info on it as the background of the div containing the iframe in question. This, combined with some positioning, you are there...

Come to think of it, it's what I do to display a backup ad in the case of, and in place of, where the one in the iframe did not load...

mobilestimulus
  • 180
  • 1
  • 14
  • 2
    I recommend against using rhetoric questions in answers. They risk being mistaken for not being an answer. – Yunnosch Dec 31 '20 at 11:17