iframe中如何獲取子級和父級元素方法總結

iframe在開發中多多少少會用到，尤其是在開發系統時，但是這會讓我們前端面臨一個問題，那就是如果iframe嵌套過多了就會導致元素獲取不到，或者是不好獲取，那么，iframe中如何獲取子級和父級元素呢？今天我把我們常用的方法做了一個總結，方便日后查看學習，也為后來的小伙伴提供參考。推薦閱讀《 iframe的初步認識》《iframe安全性探索》《iframe自適應之廣告設計》

JS獲取

父級獲取子級元素：

1	window.frames[iframe的name屬性值];

調用方法：

1. document.getElementById(“子頁面元素ID”).contentWindow.子頁面方法名;
2. document.getElementsByTagName(“子頁面元素標簽名”)[i].contentWindow.子頁面方法名;
3. document.getElementsByClassName(“子頁面元素類名”)[i].contentWindow.子頁面方法名;

子級獲取父級元素：

1. window.parent.document.getElementById(“父頁面元素ID”);
2. window.parent.document.getElementsByTagName(“父頁面元素標簽名”)[i];
3. window.parent.document.getElementsByClassName(“父頁面元素類名”)[i];

調用方法：

1	window.parent.父頁面方法;

jQuery獲取

父級查找子級元素：

1	$ (iframe選擇器).contents().find(iframe中元素選擇器);

調用方法：

1	$ (iframe選擇器)[0].contentWindow.子頁面方法名;

子級向上查找父級元素：

1. $(父頁面元素選擇器, window.parent.document);
2. window.parent.$(父頁面元素選擇器)window.parent.父頁面方法;

調用方法：

1	window.parent.父頁面方法;

當嵌套三層，或者更多時：

1	$ ('iframe').contents().find('iframe').contents().find("iframe")......

東西很簡單，當做筆記記錄一下。