iframe是HTML5新增的標(biāo)簽，用于在當(dāng)前頁面中嵌套其他網(wǎng)頁，而在iframe中獲取父頁面的元素則需要用到j(luò)Query。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>父子頁面交互</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><div id="parentDiv"><p>這是父頁面的元素</p></div><iframe src="child.html" id="childIframe"></iframe><script>$(function(){
var parentDoc = $(parent.document);
var parentDiv = parentDoc.find("#parentDiv");
var childIframe = $("#childIframe");
var childDoc = childIframe[0].contentWindow.document;
var childDiv = $(childDoc).find("#childDiv");
parentDiv.css("background-color", "yellow");
childDiv.css("background-color", "blue");
});
</script></body></html>上面的代碼演示了在父頁面中使用jQuery獲取子頁面的元素，以及在子頁面中使用jQuery獲取父頁面的元素。
需要注意的是，在獲取子頁面的元素時，需要先獲取到iframe元素，然后使用索引[0]獲取子頁面的document對象才能使用jQuery進(jìn)行操作。
在跨域的情況下，由于瀏覽器的同源策略限制，父頁面無法獲取子頁面的元素，但是可以通過window.postMessage()和message事件進(jìn)行跨域通信。