如何选择位于页面上 iframe 中的 html 元素

Question

我正在编写 webextension 以简化帐户管理员登录帐户，当我尝试使用 js 获取登录输入时尝试自动将用户登录到 angularjs 应用程序中，但未找到。该元素在浏览器的检查器面板中表示，但在页面源中不存在。

UPD：我找到了问题的原因——这个元素位于页面上的 iframe 中，我当前的问题是如何访问 iframe 的文档。我发现在 devtools 控制台中有命令 'cd' 正是我所需要的：

var ifr = document.getElementById('aid-auth-widget-iFrame');

var ifrContent = ifr.contentWindow;

cd(ifrContent);

document.getElementById('sign-in').value = 'login';

但是 'cd' 不能从页面上的脚本中执行。

接下来我确实尝试访问框架的文档：

var ifr = document.getElementById('aid-auth-widget-iFrame');

ifr.contentWindow.document;

SecurityError: Permission denied to access property "document" on cross-origin object

是否可以在页面上现有的 iframe 中执行 js 或选择和操作此 iframe 中的元素？

弃用的问题内容： 我发现 angular.element 可能会有所帮助，但它也找不到元素。可能是因为我尝试了“文档”，我使用 vanilla js 访问的“文档”是什么，并且缺少所需的元素。我是否需要将其他内容传递给 angular.element 参数？尝试了一些像 angular.element('div#pageWrapper') 这样的选择器作为根但得到错误（错误说这种选择器不受支持）

angular.element('div#pageWrapper')

Error: [jqLite:nosel] http://errors.angularjs.org/1.5.8/jqLite/nosel

Answer 1

该find()方法仅限于按标签名称查找。因此，您无法使用您显示的方法访问该元素。您可以改为使用以下语法访问元素angular.element($document[0].querySelector('#account_name_text_field'));// or angular.element(document.querySelector('#account_name_text_field'));其中$document是浏览器window.document对象的 jqLite 包装器。