Question

我正在努力使嵌入式Flickr视频在我正在为Tumblr工作的响应主题上变得流畅。我对任何其他嵌入式视频或音频播放器（Youtube，Vimeo，Soundcloud，Spotify等）表现不错，但Flickr视频正在重叠，无法将它们包含在父容器中。

Flickr视频iframe及其某些子元素具有内联css声明，导致内容溢出。 Here's a screenshot with the iframe structure

首先，我试图用CSS覆盖这些样式，但没有效果。然后我尝试使用jQuery，但无法定位iframe。

<iframe frameborder="0" allowfullscreen="" class="flickr-embed-frame" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen="" width="700" height="393" data-natural-width="1024" data-natural-height="576" style="overflow: hidden; padding: 0px; margin: 0px; width: 700px; height: 393px; max-width: none;" data-loaded="true"></iframe>

尽管iframe有一个css类.flickr-embed-frame，我既不能定位它，也不能定位它的子元素。我已尝试在$(document).ready()和$(window).load()内使用我的函数获得任何结果。

像$('.flickr-embed-frame').contents().find('.child-class');这样的选择器也没有用过。

在iframe内，有一个video元素：

<video src="https://www.flickr.com/photos/138041208@N02/27214754585/play/hd/9ecf29781c/" width="699" height="393" poster="https://farm8.staticflickr.com/7776/27214754585_9ecf29781c_c.jpg" controls=""></video>

还尝试使用$('video[src^="https://www.flickr.com"]')这样的选择器来定位它，但没有结果。

无法找到任何相关问题，所以希望有人能找到解决方案。感谢。

编辑 = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - < / p>

好的，我尝试在JSFiddle上手动嵌入Flickr视频而不是Tumblr（您只需将URL链接粘贴到视频中）。这是代码Flickr要求您添加代码以显示视频：

<a data-flickr-embed="true"          href="https://www.flickr.com/photos/138041208@N02/27214754585/in/dateposted-public/" title="Test video"><img src="https://c2.staticflickr.com/8/7776/27214754585_9ecf29781c_b.jpg" width="1024" height="576" alt="Test video"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

似乎是稍后添加iframe，通过javascript注入DOM。这一定是我无法通过CSS和jQuery来定位iframe的原因，因为最初它不存在。

现在我的问题是：如何检查此iframe注入DOM的时间？这样我就可以通过jQuery来定位它并进行我需要的更改。

已解决 = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - < / p>

我终于找到了解决这个问题的方法，请查看我的评论。

Answer 1

感谢David Walsh（davidwalsh.name/detect-node-insertion）曝光的一个非常巧妙的技巧，我已经设法解决了这个问题。

首先，我们添加一个将在插入iframe时启动的动画：

/* set up the keyframes; remember to create prefixed keyframes too! */
@keyframes nodeInserted {  
    from { opacity: 0.99; }
    to { opacity: 1; }  
}

动画需要应用于您想要侦听的元素（在本例中为iframe）。

.parent-container iframe {
    animation-duration: 0.001s;
    animation-name: nodeInserted;
}

当动画结束时，将触发插入事件。

首先，您必须创建一个充当事件侦听器回调的函数：

var insertListener = function(event){
    if (event.animationName == "nodeInserted") {
        // This is the debug for knowing our listener worked!
        // event.target is the new node!
        console.warn("Another node has been inserted! ", event, event.target);
    }
}

如果动画名称与所需的动画匹配，我们知道已注入DOM节点。现在我们将事件监听器添加到父级：

document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

Here's a demo我使用嵌入的Flickr视频制作，工作正常：

Answer 2

查看以前关于SO的帖子：How to access the content of an iframe with jQuery?

解决方案似乎是使用jQuery＆＃39; s contents()

$("#myiframe").contents().find("#myContent")

无法使用jQuery

2 个答案: