Question

我有一些问题：

我有一些容器，这个div下面有三个元素。三个元素为images或iframe，vimeo嵌入movie。

在第一种情况下，我有：

<div id="media-content">
  <iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>

以下：

<div class="media-list" id="media-list">
                <span> <?php echo $this->Html->image('placeholder/video2.jpg');?>  </span>
                <span> <?php echo $this->Html->image('placeholder/video3.jpg');?>  </span>
                <span>
                    <iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </span>
            </div>

和Jquery：

var media = $('#media-list img');
    var mediaContainer = $('#media-content');
    $(media).on('click',function(e){
        var vals = $(this).parent().html();
        $(mediaContainer).html(vals);
        e.preventDefault();
        console.log (e.target);
    });

现在这段代码的作用是什么：

点击video2.jog或video3.jpg后，iframe中的<div id="media-content">将替换为此点击的图片。这没关系。

但我想在iframe内点击vimeo电影<div id="media-content">。

所以这是简单的内容交换，但问题是，我不知道＆＃34;转移＆＃34; vimeo iframe做另一个div，因为点击它什么都不做。

感谢您的回复。

PS：为了解决这个问题，我发送图像，它显示3个红色跨度和一个大绿色div。克服跨度应该设置他的attr（在这种情况下是img）。这项工作，问题是，点击vimeo span应该打开绿色div中的视频。enter image description here

Answer 1

当浏览器加载/准备DOM时，则不会立即包含iframe。对于摇动javascript或jquery canot获取iframe的内部元素，因为DOM没有它，而javascript或jquery只获取iframe标签。这是jquery＆amp;的一个关键且很大的问题。当iframe加载来自不同域/主机的东西时，iframe 您还可以通过使用jquery获取span来获取iframe元素。但是为此你必须给第三个跨度一个div，并且必须点击不在iframe内容上的div来获得所需的解决方案。

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div> 
 <div class="media-list" id="media-list"> 
            <span> <?php echo $this->Html->image('placeholder/video2.jpg');?>  </span>
            <span> <?php echo $this->Html->image('placeholder/video3.jpg');?>  </span>

      <span >  
         <div style="border: 1px solid red; z-index:3;width:80px;height:80px;padding:30px;">
         <iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
         </div> 
     </span>   
 </div> 
<script>
$(document).ready(function () {
var media = $('#media-list img');   
var mediaContainer = $('#media-content'); 
    $(media).on('click',function(e){ 
        var vals = $(this).parent().html();
        $(mediaContainer).html(vals); 
        e.preventDefault();
        console.log (e.target);
    }); 
var media2 = $('#media-list div');  
    $(media2).on('click',function(e){ 
        var vals = $(this).html();
        $(mediaContainer).html(vals).height("70%").width("70%");
         e.preventDefault();
        console.log (e.target);
    }); 
 });
</script>

交换div的内容，点击图片或iframe（Vimeo）

1 个答案: