iframe 和过渡的不良行为答案

【问题标题】：Unwanted behaivour with iframes and transitionsiframe 和过渡的不良行为
【发布时间】：2017-03-11 15:42:03
【问题描述】：

我这里有点棘手。请记住，我对网络开发非常陌生。我试图让视频在单击文本时以淡入和幻灯片打开。我正在使用 iframe，因为它允许我避免 jquery 的滑动功能，除非它被缓存，否则它不够平滑。我以前从未使用过 iframe，并且遇到了不需要的行为。当我点击一个链接时，所有视频都会打开。见 gif：

这是我的代码。为了清楚起见，我已经编辑了文本。

我的做法是，所有视频都有一个将它们折叠起来的类，并且我使用 javascript 添加了一个“开放”类。但正如我所说，它似乎针对所有人。任何帮助表示赞赏。 P

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body> 
<div id="wrap">

<p id="text"> Lorem ipsum dolor...
    <span id="link1">link 1</span> 
    <span id="wrap1">
        <iframe  id="frame" class="rect" src="iframe.html" scrolling="no" marginwidth=0 marginheight=0></iframe>
    </span>
....Lorem ipsum dolor...
    <span id="link2">link 2</span>
    <span id="wrap2">
        <iframe  id="frame2" class="rect" src="iframe2.html" scrolling="no" marginwidth=0 marginheight=0></iframe>
    </span>
 ....Lorem ipsum dolor sit amet...
</p>

</div>
    <script type="text/javascript" src="jquery.js"></script>
    <script src="script.js" type="text/javascript"></script>
</body>
</html>

CSS：

#wrap{
    margin: 100px auto;
    width: 350px;
}

p{
    line-height: 2em;
}

iframe {
    border:0 none;
}

.rect{
    float: left;
    height: 0px;
    width: 350px;

    display: block;
    margin: 0px;
    padding: 0px;

    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 200px;
    width: 350px;
    opacity: 1;
}

#link1{
    color: red;
    cursor: pointer;    
}

#link2{
    color: red;
    cursor: pointer;
}

JavaScript：

  $(document).ready(function(){

    $("#link1").click(function(){


        if ($( ".rect" ).hasClass( "open" )){

            $(".rect").removeClass("open");

            $("body").find("iframe").contents().find("#pasc").get(0).pause();

        } else {

        $(".rect").addClass("open");

       $("body").find("iframe").contents().find("#vid1").get(0).play();
        }
    });

    $("#link2").click(function(){


        if ($( ".rect" ).hasClass( "open" )){

            $(".rect").removeClass("open");

            $("body").find("iframe").contents().find("#vid2").get(0).pause();


        } else {

        $(".rect").addClass("open");

         $("body").find("iframe").contents().find("#vid2").get(0).play();
        }  
    });
    });

iframe1：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>   
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">       
</head>
<body>
    <video id="vid1" width="350" height="200" >
        <source src="video1.mp4" type="video/mp4">
    </video>
</body>
</html>

iframe2：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>   
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">       
</head>
<body>
    <video id="vid2" width="350" height="200" >
        <source src="video2.mp4" type="video/mp4">
    </video>
</body>
</html>

【问题讨论】：

点击链接时，您将定位所有 iframe。将$("body").find("iframe") 更改为$(this).next("iframe")

标签： javascript jquery html css iframe

【解决方案1】：

问题出在这一行：

$(".rect").addClass("open");

您正在将open 类添加到所有具有.rect 类的元素。

您需要改用 iframe id，这样您就可以只定位特定的 iframe，例如：

$("#frame2").addClass("open");

【讨论】：

【解决方案2】：

Working fiddle。

当您使用$(".rect") 时，它会针对所有具有rect 类的元素，当您调用$("body").find("iframe") 时，它会针对页面中的所有 iframe，而您在这里遇到了问题。

为了避免您可以使用当前对象 $(this) 来引用相关的 iframe 并点击 link 使用：

$(this).next().find('.rect');

所以你可以将它存储在一个变量中，然后用它来触发所有其他功能：

$("#link1").click(function(){
    var rect = $(this).next().find('.rect');

    if (rect.hasClass( "open" ))
    {
        rect.removeClass("open");
        rect.contents().find("#pasc").get(0).pause();
    } else {
        rect.addClass("open");
        rect.contents().find("#vid1").get(0).play();
    }
});

$("#link2").click(function(){
    var rect = $(this).next().find('.rect');

    if (rect.hasClass( "open" ))
    {
        rect.removeClass("open");
        rect.contents().find("#vid2").get(0).pause();
    } else {
        rect.addClass("open");
        rect.contents().find("#vid2").get(0).play();
    }
});

希望这会有所帮助。

【讨论】：

谢谢。这有帮助。你会碰巧知道是否有办法不必使用两个 iframe 文件...我可以同时拥有两个视频吗？交易