如果你需要在一個(gè) iframe 內(nèi)嵌入一個(gè)網(wǎng)頁(yè)并且需要在父頁(yè)面中操控它，那么 jQuery 提供了一個(gè)簡(jiǎn)單的方法，即使用 iframe 的父元素。這里提供一個(gè)簡(jiǎn)單示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery Iframe Demo</title>
</head>
<body>
<h1>這是父頁(yè)面</h1>
<iframe src="child.html" id="my-iframe"></iframe>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var iframe = $('#my-iframe')[0].contentWindow;
$('#my-iframe').on('load', function() {
iframe.postMessage('Hello from parent!', '*');
});
$(window).on('message', function(e) {
alert('Message received from child: ' + e.originalEvent.data);
});
});
</script>
</body>
</html>在這個(gè)例子中，我們?cè)诟疙?yè)面內(nèi)嵌入了一個(gè)子頁(yè)面：child.html。然后，我們使用 jQuery 找到 iframe 元素的句柄，并且使用 contentWindow 屬性獲取到了 iframe 的 window 對(duì)象。我們?cè)?iframe 的 load 事件中發(fā)送了一個(gè)消息給子頁(yè)面（“Hello from parent!”），并且我們?cè)诟疙?yè)面中監(jiān)聽了 window 對(duì)象的 message 事件。當(dāng)子頁(yè)面向父頁(yè)面發(fā)送消息時(shí)，我們就會(huì)彈出一個(gè)包含該消息的對(duì)話框。
這是一個(gè)非常簡(jiǎn)單的示例，但它可以讓你了解如何在 jQuery 中使用 iframe 的父元素來(lái)與嵌入的子頁(yè)面進(jìn)行通信。如果你需要更復(fù)雜的功能，例如在父頁(yè)面中操控子頁(yè)面的 DOM 元素，那么你需要更深入地研究 iframe 和 jQuery 的相關(guān)知識(shí)。