查询标记为“广告”的 iframe

Question

当我查看某些页面的源代码时，我看到一个标签为“此框架被识别为广告框架”。有没有办法查询这些 iframe？我怎样才能像 DOM 树上的 iframe 一样进行查询？或者如何检测广告框？你可以看下图我的意思，就是图中红圈圈出来的。

PS：我使用 Chrome，为了能够看到广告，我禁用了 AdBlocker，并使用了隐身模式。

Answer 1

TL;DR：DevTools 检查是否

然后它将其分类为“广告”iframe，然后将ad指示器附加到 DOM 元素。

如果你感兴趣：

Chromium 浏览器（如 Chrome 和 Edge）可以检测<iframe>DOM 中的哪个元素是广告框架。

它由 DevTools 内部 SDK 检测到。

正如您所看到的，这些 iframe 具有ad由 DevTools 添加的指示器。

</body>请注意，这些 iframe 会在结束标记之后和结束标记之前注入到页面中</html>。这是注入广告帧的标准，它们应该是 DOM 树中的最后一个元素。

DevTools 中有几个指标（称为Adorners）。
您可能在 DOM 树中注意到的最常见的装饰器是flexCSS Flexbox容器和gridCSS网格容器。

如果您有兴趣，这些指标在 DevTools AdornerManager 中定义：

devtools-frontend\front_end\panels\elements\components\AdornerManager.ts

正如您所看到的，其中一个装饰物是“广告”

DevTools 使用以下代码为用于广告目的的 iframe 添加广告装饰器：

devtools-frontend\front_end\panels\elements\ElementsTreeElement.ts

正如你所看到的，有一个简单的检查 if (node.isAdFrameNode())

isAdFrameNode()是 DOMNode 类的一个方法：

devtools-frontend\front_end\core\sdk\DOMModel.ts

该代码最重要的部分是：

return frame.adFrameType() !== Protocol.Page.AdFrameType.None;

如果检查的 iframe“adFrameType”不是等于“none”的 AdFrameType，则返回

D:\www\devtools\devtools-frontend\front_end\ generated\protocol.ts

正如您所注意到的，还有 AdFrameExplanation 的枚举，它可以是：

如果该检查将 iframe 分类为广告，它会在 DevTools 中的元素末尾添加这个小代码：

您可以在此处查找 DevTools 代码：