Question

我在试图找出这个简单的问题时感到困惑。我有一个加载youtube视频的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>

我可以选择此iframe，如果它有ID，例如id =“youtube”，并带有以下代码：

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';

^=运算符匹配以特定字符串开头的属性。

Answer 2

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

查看CSS Attribute selectors

Answer 3

使用css属性选择器和querySelector函数非常简单。

＆＃13;

const url = 'https://www.youtube-nocookie.com/embed/******'


const iframe = document.querySelector(`iframe[src="${url}"`);

function changeIframeSrc(newUrl){
  iframe.setAttribute('src', newUrl);
}

＆＃13;

<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>

＆＃13;

根据src值选择Iframe并进行更改

3 个答案: