如何在同一个机构中的2个不同iframe中添加2个不同的链接？

时间：2017-05-27 13:52:45

标签： javascript jquery html css iframe 

    <!DOCTYPE html>
<html>
<style>
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align:center;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;

}

.sidenav a:hover{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
<script>
function ope() {
    document.getElementById("mySidenav").style.width = "100%";
}

function clo() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="clo()">&times;</a>
  <iframe width="420" height="345" src="https://www.youtube.com/embed/Uks8psEpmB4">
</iframe>
</div>
<div class="w3-container">


  <div class="w3-card-4 w3-dark-grey" style="width:50%">

    <div class="w3-container w3-center">
    <span style="cursor:pointer" onclick="ope()">
      <h3>Friend Request</h3>
      <img src="img_avatar3.png" alt="Avatar" style="width:80%">
      <h5>John Doe</h5>
      </span>
    </div>

  </div>
</div>



<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="clo()">&times;</a>
  <iframe width="420" height="345" src="https://www.youtube.com/embed/1PPDoAKbaNA">
</iframe>
</div>
<div class="w3-container">


  <div class="w3-card-4 w3-dark-grey" style="width:50%">

    <div class="w3-container w3-center">
    <span style="cursor:pointer" onclick="ope()">
      <h3>Friend Request</h3>
      <img src="img_avatar3.png" alt="Avatar" style="width:80%">
      <h5>John Doe</h5>
      </span>
    </div>

  </div>
</div>

</body>
</html>






    function ope() {
        document.getElementById("mySidenav").style.width = "100%";
    }

    function clo() {
        document.getElementById("mySidenav").style.width = "0";
    }


    body {
        font-family: "Lato", sans-serif;
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
        text-align:center;
    }

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;

    }

    .sidenav a:hover{
        color: #f1f1f1;
    }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }


    <!DOCTYPE html>
    <html>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <body>
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="clo()">&times;</a>
      <iframe width="420" height="345" src="https://www.youtube.com/embed/Uks8psEpmB4">
    </iframe>
    </div>
    <div class="w3-container">


      <div class="w3-card-4 w3-dark-grey" style="width:50%">

        <div class="w3-container w3-center">
        <span style="cursor:pointer" onclick="ope()">
          <h3>Friend Request</h3>
          <img src="img_avatar3.png" alt="Avatar" style="width:80%">
          <h5>John Doe</h5>
          </span>
        </div>

      </div>
    </div>



    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="clo()">&times;</a>
      <iframe width="420" height="345" src="https://www.youtube.com/embed/1PPDoAKbaNA">
    </iframe>
    </div>
    <div class="w3-container">


      <div class="w3-card-4 w3-dark-grey" style="width:50%">

        <div class="w3-container w3-center">
        <span style="cursor:pointer" onclick="ope()">
          <h3>Friend Request</h3>
          <img src="img_avatar3.png" alt="Avatar" style="width:80%">
          <h5>John Doe</h5>
          </span>
        </div>

      </div>
    </div>

</body>
</html>

我每次写iframe的SRC不同的链接时重定向到总是前一个导致了很多问题，我sdhcfgfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff

2 个答案:

答案 0 :(得分：1)

因此您的代码存在一些问题：

首先，在HTML id 中，名称是独占的，您有两个具有相同ID的元素，即mySidenav。这是您的代码不起作用的主要原因，因为它不知道您要使用哪个代码。

要修复代码，请执行以下操作：

<!-- First video -->
<div id="first" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="clo.call(this)" data-cls="first">&times;</a>
  <iframe width="420" height="345" src="https://www.youtube.com/embed/Uks8psEpmB4"></iframe>
</div>

<div class="w3-card-4 w3-dark-grey" style="width:50%">
  <div class="w3-container w3-center">
    <span style="cursor:pointer" onclick="ope.call(this)" data-id="first">
      <h3>Friend Request</h3>
      <img src="img_avatar3.png" alt="Avatar" style="width:80%">
      <h5>John Doe</h5>
    </span>
  </div>
</div>



<!-- Second video -->
<div id="second" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="clo.call(this)" data-cls="second">&times;</a>
  <iframe width="420" height="345" src="https://www.youtube.com/embed/1PPDoAKbaNA"></iframe>
</div>

<div class="w3-card-4 w3-dark-grey" style="width:50%">
  <div class="w3-container w3-center">
    <span style="cursor:pointer" onclick="ope.call(this)" data-id="second" >
      <h3>Friend Request</h3>
      <img src="img_avatar3.png" alt="Avatar" style="width:80%">
      <h5>John Doe</h5>
      </span>
    </div>
  </div>

至于javascript，请更改为：

function ope() {
    let vidPos = this.getAttribute("data-id");
    document.querySelector("#"+vidPos).style.width = "100%";
}

function clo() {
    let vidPos = this.getAttribute("data-cls");
    document.querySelector("#"+vidPos).style.width = "0%";
}

您应该注意以下几点： 1）我将ope()更改为ope.call(this)以将上下文从窗口对象更改为元素。 2）我添加了自定义数据属性，以帮助区分和定位不同的元素，并将它们链接到不同的视频。

您的代码应该按照您在下面的演示中的预期工作。

function ope() {
        let vidPos = this.getAttribute("data-id");
        document.querySelector("#"+vidPos).style.width = "100%";
 }

 function clo() {
        let vidPos = this.getAttribute("data-cls");
        document.querySelector("#"+vidPos).style.width = "0%";
}
body {
        font-family: "Lato", sans-serif;
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
        text-align:center;
    }

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;

    }

    .sidenav a:hover{
        color: #f1f1f1;
    }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }
<!DOCTYPE html>
    <html>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <body>
    <div id="first" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="clo.call(this)" data-cls="first">&times;</a>
      <iframe width="420" height="345" src="https://www.youtube.com/embed/Uks8psEpmB4">
    </iframe>
    </div>
    <div class="w3-container">


      <div class="w3-card-4 w3-dark-grey" style="width:50%">

        <div class="w3-container w3-center">
        <span style="cursor:pointer" onclick="ope.call(this)" data-id="first">
          <h3>Friend Request</h3>
          <img src="img_avatar3.png" alt="Avatar" style="width:80%">
          <h5>John Doe</h5>
          </span>
        </div>

      </div>
    </div>



    <div id="second" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="clo.call(this)" data-cls="second">&times;</a>
      <iframe width="420" height="345" src="https://www.youtube.com/embed/1PPDoAKbaNA">
    </iframe>
    </div>
    <div class="w3-container">


      <div class="w3-card-4 w3-dark-grey" style="width:50%">

        <div class="w3-container w3-center">
        <span style="cursor:pointer" onclick="ope.call(this)" data-id="second" >
          <h3>Friend Request</h3>
          <img src="img_avatar3.png" alt="Avatar" style="width:80%">
          <h5>John Doe</h5>
          </span>
        </div>

      </div>
    </div>

</body>
</html>

答案 1 :(得分：0)

这是一种正确的格式如果您有任何疑问，请联系我Easily Learn Contact Form。请提及你的姓名，你的电子邮件

function ope() {
    document.getElementById("mySidenav").style.width = "100%";
}

function clo() {
    document.getElementById("mySidenav").style.width = "0";
}
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align:center;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;

}

.sidenav a:hover{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="clo()">&times;</a>
  <iframe width="420" height="345" src="https://www.youtube.com/embed/Uks8psEpmB4">
</iframe>
</div>
<!-- First Iframe 1 -->
<div class="w3-container">
  <div class="w3-card-4 w3-dark-grey" style="width:50%">
    <div class="w3-container w3-center">
    <span style="cursor:pointer" onclick="ope()">
      <h3>Friend Request</h3>
      <img src="img_avatar3.png" alt="Avatar" style="width:80%">
      <h5>John Doe</h5>
      </span>
    </div>
  </div>
</div>

<!-- First Iframe 2 -->
<div class="w3-container">
  <div class="w3-card-4 w3-dark-grey" style="width:50%">
    <div class="w3-container w3-center">
    <span style="cursor:pointer" onclick="ope()">
      <h3>Friend Request</h3>
      <img src="img_avatar3.png" alt="Avatar" style="width:80%">
      <h5>John Doe</h5>
      </span>
    </div>
  </div>
</div>

<br />

<!-- Second Iframe 1 -->
<div class="w3-container">
  <div class="w3-card-4 w3-dark-grey" style="width:50%">
    <div class="w3-container w3-center">
    <span style="cursor:pointer" onclick="ope()">
      <h3>Friend Request</h3>
      <img src="img_avatar3.png" alt="Avatar" style="width:80%">
      <h5>John Doe</h5>
      </span>
    </div>
  </div>
</div>

<!-- Second Iframe 2 -->
<div class="w3-container">
  <div class="w3-card-4 w3-dark-grey" style="width:50%">
    <div class="w3-container w3-center">
    <span style="cursor:pointer" onclick="ope()">
      <h3>Friend Request</h3>
      <img src="img_avatar3.png" alt="Avatar" style="width:80%">
      <h5>John Doe</h5>
      </span>
    </div>
  </div>
</div>

相关问题
最新问题