преобразовать предзагрузку img в iframe

Question

$('<img />')
   .attr('src', val)
   .attr('width', "400")
   .load(function(){
      $('.showdata').append( $(this) );
   }
);

Это прекрасно работает для изображений, как это будет конвертировать 1: 1 в iframes?Вот быстрый jsfiddle: http://jsfiddle.net/ET8Gw/

Answer 1

В отличие от объектов Image, IFrames не будут загружаться до тех пор, пока они не станут частью DOM.

Чтобы обойти это, вы можете скрыть элемент, добавить его в DOM, и когда при запуске события load отобразится его:

var val = "http://dumb.com/";
 $('<iframe />')
            .hide()
            .attr('src', val)
            .attr('width', "500")
            .load(function(){
                $(this).show();
            })
            .appendTo(".showdata");

http://jsfiddle.net/ET8Gw/1/

Answer 2

var val = "http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/texas_drought_fires/bp1.jpg";
$('<iframe/>')
    .attr('src', val)
    .attr('width', "500")
    .appendTo($('.showdata'));

http://jsfiddle.net/ET8Gw/5/

Answer 3

У меня все получилось:

var val = "http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/texas_drought_fires/bp1.jpg";

$('.showdata').append('<iframe src="' + val + '" width="400" height="200"><\/iframe>');

jsFiddle: http://jsfiddle.net/ET8Gw/22/

Answer 4

Попробуйте что-то вроде этого:

$("<iframe></iframe>")
    .css("display":"none")
    .attr('src', val)
    .load( 
        function(){
            $(this).show();
        })
    .appendTo(".showData");

Не будет работать кросс-домен.