src値に基づいてIframeを選択してそれを変更してください

Question

この単純な問題を解明しようとしていると感じています。これはIDを持っている場合、私は、このIFRAMEを選択することができます

<div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card"><iframe id="youtube" width="560" height="315" src="https://www.youtube-nocookie.com/embed/******" frameborder="0"></iframe> 

、このコードの例のID =「ユーチューブ」：：私はユーチューブビデオをロードするiframeタグを持っている

document.getElementById('youtube').src = 'https://www.youtube.com/embed/WC3ONXJn9FQ'; 

しかし、問題はあります私のiframeはidを持っていない、idを持たない要素を取得することは可能でしたが、srcのURLと一致してurlを変更することが可能だったのでしょうか？

編集：私はjQueryのを使用することはできません

Answer 1

をチェックしてくださいあなたは属性と一致するdocument.querySelectorを使用することができます。

var iframe = document.querySelector('iframe[src^="https://www.youtube-nocookie.com/embed/"]'); 
iframe.src = 'https://www.youtube.com/embed/WC3ONXJn9FQ'; 

^=演算子は一致しましたthで始まる属性特定の文字列。

Answer 2

document.querySelector('iframe[src="old url"]').src = 'new url'; 

CSS Attribute selectors

Answer 3

これはCSS属性セレクタとquerySelector機能ではかなりシンプルです。

const url = 'https://www.youtube-nocookie.com/embed/******' 
 

 

 
const iframe = document.querySelector(`iframe[src="${url}"`); 
 

 
function changeIframeSrc(newUrl){ 
 
    iframe.setAttribute('src', newUrl); 
 
}

<div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card"><iframe id="youtube" width="560" height="315" src="https://www.youtube-nocookie.com/embed/******" frameborder="0"></iframe> 
 

 
<button onclick="changeIframeSrc('https://www.youtube.com/embed/AaGK-fj-BAM')">Change Iframe SRC</button>

オペレータを説明するための