时间戳

首页 > 解决方案 > 如何选择位于页面上 iframe 中的 html 元素

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

问题描述

我正在编写 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

标签： javascripthtmlangularjsiframecss-selectors

解决方案

我认为您使用的 angular.element 不能满足您的要求。尝试使用 angular.element(document).find(#account_name_text_field)。

请参阅https://docs.angularjs.org/api/ng/function/angular.element中的更多信息

推荐阅读