确定 iFrame 元素是否作为包装器中的子元素存在答案

【问题标题】：Determine if iFrame element exists as a child element within wrapper确定 iFrame 元素是否作为包装器中的子元素存在
【发布时间】：2021-12-26 17:58:38
【问题描述】：

使用以下sn-p：

let iframe = videoWrapper;
console.log(iframe);

我得到以下回报：

在video-player 内，我有以下子元素：

确定<iframe> 是否存在于该父包装中并检查所有级别的子元素的最佳方法是什么？

<iframe> 可以是父元素中的一层或两层，所以这完全取决于。

如果我能确定data-src 是否存在于 iFrame 中，则加分。

我似乎根本无法追踪它 - 我尝试了以下项目：

let iframe = videoWrapper.parents().eq(2).find('iframe');  
let iframe = videoWrapper.contents().find('iframe');  
let iframe = videoWrapper.find('iframe');  
let iframe = videoWrapper.find('iframe').length;

似乎没有任何效果，所有帮助将不胜感激！

【问题讨论】：

如果您解释“似乎没有任何效果”，您可以获得奖励积分 - 请提供错误情况或日志，或解释是什么导致您认为它不起作用。
@RandyCasburn，如...我无法定位 iFrame 元素，或者我可能不会发布这个问题？ - 这些都是试图抓住<iframe>元素的尝试。
所以不存在错误？ iframe 的内容来自哪里？
@RandyCasburn，从技术上讲，没有 - 但我也没有正确定位它，所以我想我称之为错误：\
我编辑了我的评论以包含有关 iframe 内容来源的问题 - iframe 内容来自哪里？

标签： javascript jquery iframe

【解决方案1】：

我希望能正确理解您的要求。

// check if exists
if ($('div.video-player iframe').length > 0) {
    alert('frame exists');
    
}

// for finding child elements
let iframeMain = $("div.video-player iframe").contents().find('#something deeper than iframe main tag');
// then just go deeper
let iframe2ndLevelDeeper = $(iframeMain).contents().find('#something even more deeper inside iframe');

// check for data-src
let dataSrc = $('').attr('data-src');

const $iframe = document.querySelector(`iframe`);

$iframe.addEventListener("load", function () {
    if (dataSrc !== '') {
       console.log("loaded and exists");
    } else {}
    
});

【讨论】：