2012-04-11 78 views
1

我想在我的网页上实现YouTube视频的延迟加载。为此,我有一个带有HTML注释的YouTube中的iframe代码的a-Tag。此外还有一个onclick事件,它取代了评论标签以激活YouTube代码。替换为JS后替换的HTML不会被执行

这里的HMTL的例子:

<a href="http://www.youtube.com/watch?v=KC2zbOwbeEs&#038;hd=1" class="video-in-link" style="background:url('http://i.ytimg.com/vi/KC2zbOwbeEs/hqdefault.jpg') no-repeat center center; width:500px; height:281px;" onclick="videoInLink(this);"> 
<!-- xxltxxiframe width="500" height="281" src="http://www.youtube.com/embed/KC2zbOwbeEs?fs=1&#038;feature=oembed&#038;autoplay=1" frameborder="0" allowfullscreenxxgtxxxxltxx/iframexxgtxx --> 
</a> 

继承人的适当JS:

function videoInLink(anchor){ 
    anchor.innerHTML = anchor.innerHTML.replace(/xxltxx/gi,'<'); 
    anchor.innerHTML = anchor.innerHTML.replace(/xxgtxx/gi,'>'); 
    anchor.innerHTML = anchor.innerHTML.replace(/<!--/,''); 
    anchor.innerHTML = anchor.innerHTML.replace(/-->/,''); 
    anchor.style.background="none"; 
    anchor.removeAttribute('href'); 
    anchor.onclick= null;            
    return false; 
} 

一切都在Firefox和Chrome精细:内容被替换和视频开始。在IE8中,替换似乎也发生了,但视频不会加载。

尝试了几种组合,没有成功。


好的,Dunhamzzz在他的想法是正确的,使代码更容易。我改变为每个视频提供者的自己的功能和实施工作。 因此,IE8执行JavaScript后没有激活代码没有问题,IE8有问题与我的代码。

也许我稍后会改进代码,但我的问题本身已得到解答。谢谢。

+2

这是做的很疯狂的方式,你为什么不只是写在函数而不是怪异搜索IFRAME元素和替换你做了语法。 – Dunhamzzz 2012-04-11 11:04:35

+0

问题是,有更多的视频提供商不仅仅是YouTube,所有的视频提供商都采用不同的实施方式 – Phil 2012-04-11 11:11:34

+0

那么在这种情况下,您可以为每一种功能制作不同的功能,至少可以节省您不必更新所有视频链接如果运营商更改其嵌入代码。 另外关于IE8的问题,这可能是因为你把一个iframe放在一个锚标记中,试着将它改为div。 – Dunhamzzz 2012-04-11 11:35:12

回答