根据src值选择Iframe并更改它
根据src值选择Iframe并更改它
提问于 2017-10-23 21:54:22
我在努力解决这个简单的问题时感到卡住了。我有一个iframe标签来加载youtube视频：
<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，例如使用以下代码的id="youtube“：
document.getElementById('youtube').src = 'https://www.youtube.com/embed/WC3ONXJn9FQ';但问题是，我的iframe没有id，如果没有id就可以获得元素，但是匹配src url并更改url，我就会犹豫不决？
编辑:我不能使用Jquery
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-10-23 21:57:45
您可以使用document.querySelector来匹配属性：
var iframe = document.querySelector('iframe[src^="https://www.youtube-nocookie.com/embed/"]');
iframe.src = 'https://www.youtube.com/embed/WC3ONXJn9FQ';^=运算符匹配以特定字符串开头的属性。
Stack Overflow用户
发布于 2017-10-23 21:57:24
document.querySelector('iframe[src="old url"]').src = 'new url';查看CSS 属性选择器
Stack Overflow用户
发布于 2017-10-23 22:02:03
对于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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46899129
复制相关文章
相似问题
腾讯云开发者
