奇怪的是,这么知名的插件却出现这个问题。我与它斗争了几个小时,终于胜利了。我认为任何遇到同样问题的人都会非常感激这篇文章。
假设我有Twitter-Bootstrap
(或另一个类似的能够折叠/展开 div 的框架)。众所周知,iframe 可以通过链接作为目标,在其中显示不同的 URL。在本例中,我指的是显示在独特 iframe 中的不同 YouTube 视频。
<a href="https://www.youtube.com/embed/Bfwg4wRcnDI" target="#youtube-frame">
Open this video into the youtube iframe
</a>
假设#youtubecontainer
,它是 #youtube-frame
的父级,已折叠。我点击了一个定位为 #youtube-frame
的链接(如上面所示的代码),并通过 jQuery .onclick
事件,#youtubecontainer
得到扩展。然后fitVids()
被应用到它(除了代码上的这一点之外,它无法完成:事实上,在扩展之前, #youtubecontainer
对于 js 来说甚至不存在)。但是......惊喜!
fitVids() 已从原始 html 中获取'src'属性并将其应用到 iframe,覆盖目标链接刚刚跟了!!!
看来 jQuery fitVids()
插件主要指#youtube-frame
“src”属性。我的尝试:
- 如果您将某个视频保留在“src”中,则该视频将覆盖您点击的任何其他视频。
- 如果您将“src”保留为空,或者甚至完全删除该属性,则无法解决问题,您将看到的不是不需要的视频,而是一个黑框。 :D
- 如果您第二次点击链接,您最终就会得到它。但这很烦人。
- 如果您编辑 jquery.fitvids.js(var 选择器),删除所有 youtube“iframe src”选择器并添加“#youtube_frame”条目,也无法解决问题。
我累了。我只找到了一个可能的解决方案。我也希望这个脚本的创建者能够增强它......这真的很奇怪,当有人想要保持视频元素的宽高比时,这个脚本不是指向元素的ID,而是困惑'src' 属性周围的东西......就像一个框架只能处理一个 src......呸!
可能的解决方案:
- 使用
eventhandlers
在 jQuery 中调整计时并保持正确的顺序。或setTimeout()
。为此,您需要更改链接到视频的方式:而不是使用<a target="#youtube_frame"
,它比 fitVids 更早触发,您需要使用 jquery 处理点击,更改 iframe 的 'src' 属性。
正确的顺序是:
- 1)
Expand the Video Container
; - 2)
fitVids()
就在上面; 3)
$('#youtube_frame').attr('src', $(this).attr('href'))
(最后一点设置 iframe 的
src
属性,从您刚刚单击的链接中获取视频 URL)。当然,这必须放在一个在单击事件上执行的函数内。
如果您有其他解决方案,请发布。我希望 fixVids 的创建者能够了解这个问题。我个人不知道如何完全修复该插件,让它不保留“src”属性。
EDIT: I've just added a testcase: http://jsbin.com/huzedamu/2/edit?js,output
Unfortunately jsbin doesn't allow the loading of youtube videos through its website,
but you can copy/paste the following pastebin, you'll see the bug more clearly:
[no matter what video you choose, at the first try you'll always get what's
inside the iframe 'src' attribute, which in the pastebin is a pretty old video]
新的单页测试用例 > [ http://pastebin.com/uLjJvhxC ]
最佳答案
这里有一个问题跟踪器:https://github.com/davatron5000/FitVids.js/issues?direction=desc&sort=created&state=open
最好创建一个简化的测试用例。
关于javascript - bootstrap 折叠 div 上的 fitVids() - 在单个 iframe 上打开多个视频的小错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22368823/