文章/答案/技术大牛

发布

社区首页 >问答首页 >JQuery多次替换Iframe

问JQuery多次替换Iframe
EN

Stack Overflow用户

提问于 2013-03-15 22:54:43

回答 1查看 102关注 0票数 0

如果你看一下this page here，你会发现我创建了一个类似Youtube的视频画廊。当它工作时，它应该用点击的缩略图替换页面主要部分(顶部)中的视频，右侧的文本也替换为与该视频相关的文本。

文本替换似乎工作得很好，但我遇到了一个问题，在交换过程中，iFrame似乎被放置了多次，因此视频播放了2-3次。

Javascript在下面--这是我遗漏的东西吗？

<script>
function replaceVideo(id) {
  originalSrc = jQuery("iframe", "#" + id).attr("src");
  autoPlay = originalSrc + "&autoplay=1";
  jQuery("iframe", "#" + id).attr("src", autoPlay);
  video = jQuery(".video-wrap", "#" + id).html();
  jQuery(".flex-video").html(video);
  text = jQuery(".video-description", "#" + id).html();
  jQuery(".vid_desc").html(text);
  jQuery("iframe", "#" + id).attr("src", originalSrc);
}

jQuery(".video-list li").click(function() {
  id = jQuery(this).attr("id");
  replaceVideo(id);
});

    jQuery(window).load(function() {
  if(window.location.search.substring(1)) {
        element = window.location.search.substring(1).split('&');
        if (document.getElementById(element[0])) {
            document.onload = replaceVideo(element[0]);
        }
    }
});
</script>

谢谢!

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-03-15 23:05:09

在您的javascript控制台中运行jQuery(".flex-video")。你会看到有三个div都有这个类。因此jQuery(".flex-video").html(video);这行JS将3个元素的内部超文本标记语言更改为iframe。

<div class="flex-video widescreen">
  <iframe width="583" height="328" src="http://www.youtube.com/embed/TWmFCX40BQc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

您需要使上面的div能够与其他flex-video框架区分开来。给父div一个id，或者另一个类，或者一些要查询的东西。这样做，你就会好起来的。

编辑:顺便说一下，这段代码是错误的：

if(window.location.search.substring(1))
{
    element = window.location.search.substring(1).split('&');
    if (document.getElementById(element[0])) {
        document.onload = replaceVideo(element[0]);
    }
}

将document.onload设置为函数调用将调用replaceVideo，并将onload属性设置为它返回的任何值，即nothing。因为视频播放了，所以它看起来可以工作，但这只是因为您调用的是replaceVideo方法。将if设置为这个值可能就足够了(除非您能解释为什么要将其设置为onload)

if(document.getElementById(element[0]))
     replaceVideo(element[0]);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15435493

复制

相似问题

问JQuery多次替换Iframe
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery多次替换IframeEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery多次替换Iframe
EN