通过jQuery将iframe替换为iframe源代码中的图像

Question

我想我想要做的是从属性的值创建一个变量，这样我就可以使用变量作为另一个属性的值插入一个新对象......

我在一个环境中有一个媒体搜索网站，我的搜索结果页面配置模板的能力受到限制。将鼠标悬停在搜索结果上会将iframe结果的网页显示在旁边：

iframe中内容的代码包含一个图像的URL作为链接的href属性，我想使用此href属性值替换iframe作为其src属性。

因此，我希望获得div.foo a的{​​{1}}属性的值，并将href替换为iframe.bar

我有这个想法，我可以使用jQuery获取并“存储”<img src="href from div.foo a"/>的{​​{1}}属性的值，将div.bar替换为href，并且将iframe.foo的{​​{1}}属性的值设置为我存储的img属性值。

帮助！

Answer 1

我认为你必须玩一些Jquery和你的I帧。例如，尝试在加载时访问iframe。做你的东西。

<强> 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();
        });

    });
});

工作示例： http://jsfiddle.net/51uaw4k9/1/

Answer 2

您可以采取以下措施：

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

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

根据您的要求，虽然听起来您希望将\更改为$，但有一种方法可以执行此操作：

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

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