Replace an iframe with an image of the source of the iframe via jQuery


I think what I want to do is create a variable from an attribute's value so I can insert a new object using the variable as another attribute's value...

I have a media search site in an environment where my ability to configure the template for our search results page is restricted. Hovering on a search result displays the web page of the result in an iframe off to the side:

The the code for the content in the iframe includes the an image's URL as a link's href attribute, and I'd like to replace the iframe with an image using this href attribute value as its src attribute.

So, I want to get the value of a's href attribute, and replace with <img src="href from a"/>

I have this notion that I can use jQuery to get and "store" the value of's href attribute, replace with an img, and set the img's src attribute's value to my stored href attribute value.


You could do something along the lines of:

    //retreive href
    href = $('.foo').attr('href');

    // set image source
    $('.bar').attr('src', href);

From what you're asking though it sounds like you'll want to change the <iframe> to <img> one way to do this is with:

    // get iframe's parent and change to image
    iframe = $('').parent();

    // change to image tag
    iframe.replaceWith( '<img class="bar">' );