如何選擇頁面上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包裝器。