引导折叠 div 上的 fitVids() - 在单个 iframe 上打开多个视频的小错误
Posted
技术标签:
【中文标题】引导折叠 div 上的 fitVids() - 在单个 iframe 上打开多个视频的小错误【英文标题】：fitVids() on bootstrap collapsed div - little bug opening multiple videos on single iframe 【发布时间】：2014-04-17 14:36:45 【问题描述】：奇怪的是，这么有名的插件竟然出现了这个问题。我与它抗争了几个小时，终于赢了。我认为任何遇到相同问题的人都会非常感谢这篇文章。
假设我有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' 属性。我的尝试：
我累了。我发现只有一个可能的解决方案。我也希望这个脚本的创建者能够改进它......真的奇怪，当有人想要保持视频元素的纵横比，而不是指向该元素的 ID 这个脚本混乱'src' 属性周围的东西......就像一个框架只能处理一个 src ......呸！
可能的解决方案：
- 使用
eventhandlers 或setTimeout() 在jQuery 中进行计时并保持正确的顺序。为此，您需要更改链接到视频的方式：您需要使用 jquery 处理点击，而不是使用比 fitVids 更早触发的<a target="#youtube_frame"，更改 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 ]
【问题讨论】：
【参考方案1】：这里有一个问题跟踪器：https://github.com/davatron5000/FitVids.js/issues?direction=desc&sort=created&state=open
最好创建一个精简的测试用例。
【讨论】：
已添加。请看主帖。不想为了这点小事注册到github。以上是关于引导折叠 div 上的 fitVids() - 在单个 iframe 上打开多个视频的小错误的主要内容，如果未能解决你的问题，请参考以下文章