jQuery创建的元素在IE7中不起作用

时间:2013-06-18 21:26:38

标签: jquery html internet-explorer-7

使用nickf的示例here 我已经创建了一个元素,可以在IE7中显示的网站上一起替换iframe。这是一个短期的止损,直到办公室的所有计算机升级到IE8,这就是为什么我们不打扰服务器端解决方案。

目标是使用YouTube嵌入代码并将其转换为旧的嵌入代码,而无需替换网站上的每个视频。

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'));

此代码的工作示例可在jsfiddle

上找到

我遇到的麻烦是创建的元素在IE7中不起作用。似乎<object>创建代码被破坏并导致jQuery停止工作,但在Chrome中它完全正常。我不确定是否有一个IE7特定的解决方法,我需要完成这个?

编辑:我故意省略了行$('iframe').remove();以便进行测试。

编辑:我的修复 -

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

2 个答案:

答案 0 :(得分:1)

您是否尝试将html创建为单个字符串并附加该字符串?

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

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

答案 1 :(得分:0)

我自己有这个问题。而不是像这样使用:

$('<div>')

创建元素使用:

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

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