同じボディ内の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に異なるリンクを作成するたびに、それは同じボディ内の2つの異なるiframeに2つの異なるリンクを追加するにはどうすればよいですか？

出典

2017-05-27 Simranjeet Singh

sdhcfgfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff私には、問題の多くを引き起こし、常に前のものにリダイレクトだからあなたのコードにいくつかの問題があります：まず

は、 HTML idの名前は排他的で、同じIDを持つ2つの要素、つまり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>

に変更：あなたはいくつかのことに注意してください

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.call(this)にope()を変更しましたコンテキストをウィンドウオブジェクトから要素に変更します。 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で私に連絡するあらゆる疑問をお持ちの場合はそれが適切なフォーマットです。、あなたがEメールあなたの名前を明記してください

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つの異なるリンクを追加するにはどうすればよいですか？

答えて

関連する問題