Question

我想在我的网页上为YouTube视频实施延迟加载。为此，我在其中添加了带有iframe代码的YouTube标记，其中包含HTML评论。此外，还有一个onclick-event，它取代了评论标签以激活YouTube代码。

以下是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的代码出现问题。

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

Answer 1

您可以使用javascript创建iframe节点，并将其附加到父级而不是执行此innerHTML黑客。一个简单的例子： http://www.developerfusion.com/thread/33979/creating-iframe-through-javascript/

用JS替换后，替换的HTML不会被执行

1 个答案: