仅当当前页面上存在 iframe 时，如何运行 JavaScript 片段？

Question

我想修改 YouTube 嵌入式 iframe 以提高 Lighthouse 分数，但我无法使 if 语句起作用：

if (document.getElementsByTagName('iframe')){
function init() {
    var vidDefer = document.getElementsByTagName('iframe');
    for (var i=0; i<vidDefer.length; i++) {
    if(vidDefer[i].getAttribute('data-src')) {
    vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
    } } }
    window.onload = init;
    function parseJSAtOnload() {
        var element = document.createElement("script");
        element.src = "https://www.youtube-nocookie.com/yts/jsbin/player_ias-vflRCamp0/en_US/base.js";
        document.body.appendChild(element);
        }
        if (window.addEventListener)
            window.addEventListener("load", parseJSAtOnload, false);
        else if (window.attachEvent)
            window.attachEvent("onload", parseJSAtOnload);
        else window.onload = parseJSAtOnload;
}

如果当前页面上存在 iframe 元素，我只想运行此代码段，但并非总是如此。这样我就可以将代码嵌入我网站的每个页面，无论内容如何。使用上面的代码，它仍然始终处于活动状态。如何让它只在带有 iframe 的页面上工作？

我在所有页面的开发者控制台中都看到了这个错误，即使是没有任何 iframe 元素的页面也是如此：

GET https://www.youtube-nocookie.com/yts/jsbin/player_ias-vflRCamp0/en_US/base.js net::ERR_ABORTED 404

Answer 1

document.getElementsByTagName() returns 一个空集合。
空的 HTMLCollections 是对象，它简化为原始 true。（我知道，JavaScript 很疯狂...）

因此，if( document.getElementsByTagName( 'no-such-element' ) ) 将始终计算为 true。

你想要：

if( document.getElementsByTagName( 'iframe' ).length > 0 ) {
//...

仅当当前页面上存在 iframe 时，如何运行 JavaScript 片段？

How to run a JavaScript snippet only if an iframe exists on the current page?

javascript

youtube

iframe

if-statement

仅当当前页面上存在 iframe 时，如何 运行 JavaScript 片段？

How to run a JavaScript snippet only if an iframe exists on the current page?

javascript

youtube

iframe

if-statement

仅当当前页面上存在 iframe 时，如何运行 JavaScript 片段？