在点击图片或 iframe (Vimeo) 时交换 div 的内容

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 时，<div id="media-content"> 中的 iframe 将替换为该单击的图像。这没关系。

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

所以这是简单的内容交换，但问题是，我不知道 "transfer" vimeo iframe 如何做另一个 div，因为点击它没有任何作用。

感谢您的回复。

PS: 为了解决这个问题，我发了一张图片，它显示了 3 个红色跨度和一个大绿色 div。点击 span 应该设置他的属性（在本例中为 img）。这项工作的问题是，点击 vimeo span 应该以绿色 div.enter image description here

打开视频

Answer 1

当浏览器 loads/makes 准备好 DOM 时，iframe 不会立即包含在内。对于 shake javascript 或 jquery 无法获取 iframe 的内部元素，因为 DOM 没有，而 javascript 或 jquery 只能获取 iframe tag.This 当 iframe 从不同的 domain/host.
加载内容时，jquery 和 iframe 是一个严重的问题您还可以通过使用 jquery 获取跨度来获取 iframe 元素。但是为此你必须给第三个跨度一个 div 并且必须单击 div 而不是 iframe 内容以获得所需的解决方案。

<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>

在点击图片或 iframe (Vimeo) 时交换 div 的内容

Swapping content of div, on click on image or iframe (Vimeo)

javascript

jquery

vimeo