Ersetzen Sie einen Iframe mit einem Bild von der Quelle des iframe über jQuery

Question

ich denke , was ich will von einem Attributwert eine Variable tun erstellen ist, damit ich ein neues Objekt mit der Variable als ein anderer Wert des Attributs einfügen ...

Ich habe eine Mediensuchsite in einer Umgebung, in der meine Fähigkeit, die Vorlage für unsere Suchergebnisseite zu konfigurieren, eingeschränkt ist. Schweben auf ein Suchergebnis zeigt die Web-Seite des Ergebnisses in einem Iframe zur Seite:

Der der Code für den Inhalt der iframe die URL eines Bildes enthält als ein Attribut href des Links, und ich würde mag es, den iframe durch ein Bild zu ersetzen, das diesen href-Attributwert als src-Attribut verwendet.

Also, ich mag den Wert von div.foo a bekommen ‚s href Attribute, und ersetzen iframe.bar mit <img src="href from div.foo a"/>

Ich habe diese Vorstellung, dass ich jQuery verwenden kann, erhalten und‚store‘der Wert von div.bar‘ s href Attribut, ersetze iframe.foo durch img und setze den src Wert des img Attributs auf meinen gespeicherten href Attributwert.

Hilfe!

Answer 1

Ich denke, Sie müssen mit einigen Jquery und Ihrem I-Frame spielen. Versuchen Sie beispielsweise, beim Laden auf Ihren iframe zuzugreifen. Und mach deine Sachen.

HTML:

<iframe id="iframe1" src="http://www.sevenforums.com/attachments/browsers-mail/145092d1379294855t-multiple-web-pages-1-screen-page-untitled.png" width="100%" height="350"> 
    <p>Your browser does not support iframes.</p> 
</iframe> 

<input id="replace_iframe" type="button" value="Replace Iframe with Image" /> 

JQuery/Javascript:

$(function(){ 
    $("#iframe1").load(function(){ 

     var iframe_obj = this; 
     var iframe_src = $(iframe_obj).attr("src"); 
     //Alerting Iframe Source 
     alert(iframe_src); 

     // If you want to replace THIS iframe with an IMAGE 
     $("#replace_iframe").click(function() { 
      $(iframe_obj).replaceWith("<img src='"+iframe_src+"' />"); 
      //Removing Replace button Element 
      $(this).remove(); 
     }); 

    }); 
}); 

Arbeitsbeispiel: http://jsfiddle.net/51uaw4k9/1/

Answer 2

Sie könnten entlang der Linien etwas tun von:

 

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

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

Von dem, was Sie fragen, ob es klingt wie Sie werde die -<img> ein Weg, dies zu tun ist mit ändern wollen:

 

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

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