如何在 Chrome 开发工具中使用 jQuery 遍历执行上下文？答案

【问题标题】：How do I traverse Execution Contexts with jQuery in Chrome Dev Tools?如何在 Chrome 开发工具中使用 jQuery 遍历执行上下文？
【发布时间】：2018-03-10 23:45:56
【问题描述】：

如何在 Chrome 开发工具中使用 jQuery 遍历执行上下文？

背景故事和目标：我在搜索的任何地方都找不到答案。我是新手，所以我可能会错误地问这个问题，所以它可能非常明显。我已经使用开发工具中的样式和元素选项卡测试了我想更改的类及其属性。我已经在 cPanel 中创建了要添加到 DOM 的类，并且知道可以使用哪些类来查询它们的插入点并删除旧类。我目前正处于测试要放入页脚的 jQuery 代码的阶段，该页脚会将这些类插入 DOM。我的最终目标是在 WordPress 中更改模式的大小和对齐方式。

您将在下面看到我查询驻留在“顶部”执行上下文中的内容的图像。然后你会看到我在 'about:blank' 上下文中无法查询它的图像（值为 null）。

Querying class found in top in 'top' context

Querying class found in top in 'about:blank' context

您将在下面看到我查询驻留在“about;blank”执行上下文中的内容的图像。然后你会看到我在“top”上下文中无法查询它的图像（null 值）。

***在cmets看到下面这两张图，我没名气****

一行要测试的 jQuery 和四行有望实现我的目标的 jQuery。他们现在看起来像这样：

<script>
jQuery(document).ready(function(){
alert('jQuery Ready!');

jQuery(function($){
$('.modalContent__content').addClass('modalContent__content-mod').removeClass('modalContent__content');
$('mc-layout__modalContent').addClass('mc-layout__modalContent-mod').removeClass('mc-layout__modalContent');
$('.mc-modal').addClass('mc-modal-mod').removeClass('mc-modal');
$('.modalContent__image').addClass('modalContent__image-mod').removeClass('modalContent__image');
)};
)};
</script>

如果我不能在控制台中查询这些，我就不可能在网站的页脚中这样做。请帮忙。欢迎任何建议、文章或任何内容。谢谢！

【问题讨论】：

[查询类在 about:blank in 'about:blank' context][3] link [Querying class found in about:blank in 'top' context][4] link

标签： javascript jquery css wordpress google-chrome-devtools

【解决方案1】：

当您在 Chrome DevTools 中切换上下文时，您将无法再访问父文档 DOM 元素，如下所示：$(".mc-modal') 这就是您在此处看到错误的原因： https://i.stack.imgur.com/QQmST.png

jQuery 选择器中的第二个参数提供了一个搜索上下文：

jQuery( selector [, context ] )

要从 iframe（关于：空白上下文）中访问 .mc-modal，您必须使用：

$(".mc-modal", parent.document)

现在要使用 jquery 从父级访问 iframe 上下文，您可以使用：

$('iframe').contents().find('.modalContent__content')

【讨论】：