要獲取 iframe 中的元素,可以:直接訪問 iframe 元素,通過 contentdocument 或 contentwindow 獲取內部元素。使用 getelementbyid 訪問具有特定 id 的元素。使用 queryselector 選擇具有特定 css 選擇器的元素。使用 queryselectorall 選擇所有具有特定 css 選擇器的元素。但請注意跨域限制,不能訪問不同域的 iframe 中的元素。
如何獲取 iframe 中的元素
直接訪問 iframe
最直接的方法是直接訪問 iframe 元素并通過其 contentDocument 或 contentWindow 屬性獲取內部元素。
const iframe = document.querySelector('iframe'); const iframeDocument = iframe.contentDocument; const iframeWindow = iframe.contentWindow; const element = iframeDocument.getElementById('elementId');
登錄后復制
使用 getElementById
可以通過 getElementById 方法訪問 iframe 中具有特定 ID 的元素。
const element = iframeDocument.getElementById('elementId');
登錄后復制
使用 querySelector
querySelector 方法可用于選擇 iframe 中具有特定 CSS 選擇器的元素。
const element = iframeDocument.querySelector('selector');
登錄后復制
使用 querySelectorAll
querySelectorAll 方法可用于選擇 iframe 中所有具有特定 CSS 選擇器的元素。
const elements = iframeDocument.querySelectorAll('selector');
登錄后復制
注意:
必須在 iframe 加載完成后才能訪問其內容。
跨域限制:從父頁面無法訪問不同域的 iframe 中的元素。