如何使用Javascript或jQuery從iFrame獲取控件

Question

我們正在html頁面中加載第三方iframe。 我們正在一個特定的div中加載它。 到此步驟為止，它已成功運行。 但是，接下來我們要查找在iFrame中加載的控件。 另外，iFrame沒有任何關聯的ID。

由於不存在iFrame ID，因此我們嘗試如下所示首先獲取iframe

var objiframe = $('#divContainer').find('iframe');

因此，在這里我們獲取了iFrame對象，但找不到位於iFrame下的任何控件。

我們嘗試了以下幾種方法來找到控件

var iFrameDOM = $(objiframe).contents();
var control = $(iFrameDOM).find("#duedate");

var data = objiframe.contentWindow.document.getElementById('duedate');

但是不知何故我們沒有得到控件或id。 在大多數情況下，我們會得到“未定義”或“無法讀取null的屬性'contentWindow'”

任何對此的幫助表示贊賞

Answer 1

如果頁面來自不同的域，則應該不能夠，瀏覽器安全沙箱應阻止這種類型的訪問。 當兩個頁面來自同一域的不同子域時，它可能會起作用。

訪問子iframe可能會起作用，但是反過來肯定不會起作用。

最簡單的方法是通過窗口上的frames對象，如下所示：

window.frames[0].document.getElementById('ElementId').style.backgroundColor="#000";

Answer 2

如果iFrame不在您的其他域上，那么您將受到限制，並且與iframe進行通信的唯一方法是使用Web Messaging API 。

因此，您必須檢查iFrame公開了哪些功能。

本文可以幫助您了解第三方iFrame可以做什么或不能做什么。