如何在2个不同的iframe中添加2个不同的链接在相同的身体？

-2

<!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个不同的iframe中添加2个不同的链接在相同的身体？

来源

2017-05-27 Simranjeet Singh

所以有几个问题与您的代码：

首先，在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>

来源

2017-05-27 14:50:50

这是一个正确的格式，如果您有任何疑问，请联络我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>

来源

2017-05-27 14:58:22 Siva

如何在2个不同的iframe中添加2个不同的链接在相同的身体？

回答

相关问题