不使用getElementById获取iframe src

Question

是否可以将iframe src传递到变量而不使用getElementById?

我不知道iframe的ID作为它的动态生成-但我希望能够检查src，看看它是否匹配一个定义的字符串-iframe有一个类，我可以瞄准这是fancybox-iframe

我希望这将工作，但它不:

var srcURL = document.getElementsByClassName('fancybox-iframe').src;

Answer 1

您可以使用getgetElementsByTagName():

方法

srcURL = document.getElementsByTagName("iframe")[0].src;

注意这个方法的名字是用复数形式写的，所以结果是一个数组，即使数组只包含一个元素。这就是为什么要附加参数[0]。

Answer 2

在评论中确认:

• 有多个iframes
• 只有一个类fancybox-iframe
• jquery已经在使用

您可以使用

选择带有特定类的iframe

$("iframe.fancybox-iframe")

然后应用.attr("src")来获取源代码:

$("iframe.fancybox-iframe").attr("src")

这是nodename.class的格式(没有空格)，这意味着元素必须是节点类型(iframe)和具有类(fancybox-iframe)。

你也可以用

$(".fancybox-iframe").attr("src")

如果这个类只在iframe上使用。

Answer 3

Element.prototype.getElementsByClassName

返回一个元素数组，所以应该使用

document.getElementsByClassName('fancybox-iframe')[0].src

或者更好的

const elements = Array.from(document.getElementsByClassName('fancybox-iframe'))
.filter(element => element.tagName.toLowerCase() == 'iframe');
if(!elements.length) {
// handle no iframe.fancybox-iframe found
}
const src = elements[0].src

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName

你也可以使用Element.prototype.querySelector和Element.prototype.querySelectorAll来避免过滤getElementsByClassName的结果，直接得到iframes

const elements = Array.from(document.querySelectorAll('iframe.fancybox-iframe'))