如何选择页面上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可能有帮助，但也找不到元素。 可能是因为我尝试了“文档”，而香草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

我认为您使用的angular.element不会满足您的要求。 尝试使用angular.element（document）.find（#account_name_text_field）。

请在https://docs.angularjs.org/api/ng/function/angular.element中引用更多信息

Answer 2

find()方法仅限于按标签名称进行查找。 因此，您无法使用显示的方法访问元素。

您可以改用以下语法访问元素

angular.element($document[0].querySelector('#account_name_text_field'));

// or 

angular.element(document.querySelector('#account_name_text_field'));

其中$document是浏览器的window.document对象的jqLit​​e包装器。