在IE8下移除Youtube Embeded Iframe造成黑屏的解决方法

项目中有个需求是在Carousel中支持Youtube的RSS Feeds，通过C#后台代码解析RSS Feeds数据源来生成HTML代码，jQuery Tools的Scrollable来初始化为Carousel。

Carousel这个插件同事已经写好了，但在IE8下切换幻灯片的时候，切换新的Youtube视频会造成黑屏，2秒以后会把网页显示出来，原因不明。

原有代码如下：

$(".scrollable .carousel-item").click(function () {
            // see if same thumb is being clicked
            if ($(this).hasClass("active")) { return; }
            var carouselContent = $(this).find('.carousel_content');
            var wrap = $(this).closest('.carousel').find(".carousel_wrap");
            var type = carouselContent.attr('type');
            if (type == 'Image') {
                var url = $(this).find('img').attr('src');

                // get handle to element that wraps the image and make it semi-transparent
                wrap.fadeTo("medium", 0.5);
                wrap.html("");
                wrap.append('<img>');

                var img = new Image();
                img.onload = function () {

                    // make wrapper fully visible
                    wrap.fadeTo("fast", 1);

                    // change the image
                    wrap.find("img").attr("src", url);

                };

                // begin loading the image
                img.src = url;
            }
            else if (type == 'Video') {
                wrap.html(carouselContent.html());
                widgetVideo.initVideo(wrap.find('.video a.video-player'));
            }
            else if (type == 'Flash') {
                wrap.html(carouselContent.html());
                widgetFlash.initSwfObj(wrap.find('.flash'));
            }
            else if (type == 'News' || type == 'Youtube'
            || type == 'RichText' || type == 'Promotion') {
                wrap.html(carouselContent.html());

最后几行代码我们可以看到切换内容的时候是

wrap.html(carouselContent.html()); //直接在wrap里覆盖新的html的

Google了下，找到一个解决方法：先把wrap中的iFrame给隐藏掉，然后Remove掉，最后把新的内容插进来。

// remove youtube iframe element
                wrap.find('iframe').hide(); wrap.empty();
                // find youtube embeded url
                if ($(this).find('.youtube').attr('embedded-url').length != 0) {
                    wrap.html('<iframe src="' + $(this).find('.youtube').attr('embedded-url') + '" frameborder="0" width="100%" height="100%" allowfullscreen></iframe>')
                }

OK，测试通过，解决！

 

参考：http://stackoverflow.com/questions/7452387/black-screen-when-removing-an-embedded-youtube-video-by-javascript-in-ie8