1

Using nickf's example found here I've created an element to hack together a replacement for an iframe on a site that is displayed in IE7. It's a short term stop-gap until all the computers at the office are upgraded to IE8 which is why we aren't bothering with a server-side solution.

The goal is to take YouTube embed code and transform it into the old embed code without having to replace every single video on the site.

var w = $('iframe').width(),
    h = $('iframe').height(),
    src = $('iframe').attr('src').split('/')[4];

$('iframe').after('<div class="iframediv"></div>');

$('<object></object>', {width: w, height: h})
.append($('<param />', {name: "movie", value: "http://www.youtube.com/v/" + src + "?hl=en_US&amp;version=3"}))
.append($('<param />', {name: "allowFullScreen", value: "true"}))
.append($('<param />', {name: "allowscriptaccess", value: "always"}))
.append($('<embed />', {src: "http://www.youtube.com/v/" + src + "?hl=en_US&amp;version=3", type: "application/x-shockwave-flash", width: w, height: h, allowscriptaccess: "always", allowfullscreen: "true"}))
.appendTo($('.iframediv'));

A working example of this code can be found here on jsfiddle

What I'm having trouble with is the created element is not working in IE7. It appears as though the <object> creation code is broken and causes jQuery to stop working, yet in Chrome it works perfectly fine. I'm not sure if there is an IE7 specific workaround that I need to accomplish this?

Edit: I purposely left out the line $('iframe').remove(); for testing purposes for now.

Edit: My fix - 

if($('html').hasClass('ie7'))
{
    var w = $('iframe').width(),
    h = $('iframe').height(),
    ytsrc = $('iframe').attr('src').split('/')[4];

    $('iframe').after('<div class="iframediv"></div>');
    $('<embed />', {width: w, height: h, src: "http://www.youtube.com/v/" + ytsrc + "?hl=en_US&amp;version=3", type: "application/x-shockwave-flash", allowfullscreen: "true", allowscriptaccess: "always"}).appendTo($('.iframediv'));
    $('iframe').remove();
}
4

2 回答 2

1

您是否尝试过将 html 创建为单个字符串并附加它？

$('.iframediv').append('
   <object><param name="move" etc="etc"></param>
   <param stuff="stuff"></param>
   <embed src=""></embed></object>');

这是一个例子。使用所有正确的参数进行测试。

于 2013-06-19T00:09:52.150 回答
0

我自己也有这个问题。而不是这样使用：

$('<div>')

创建元素使用：

$('<div></div>')

第二个也可以在 IE 中使用。

于 2013-06-18T22:14:43.420 回答