Jquery是一種非常流行的JavaScript庫(kù)，它具有簡(jiǎn)單易用、高效快速等優(yōu)點(diǎn)，常常被用來(lái)操作HTML頁(yè)面上的元素。不僅如此，Jquery 還可以用來(lái)操作iframe內(nèi)的元素，接下來(lái)我們就講講如何使用Jquery來(lái)調(diào)用ifream里的方法。
首先，在main.html文件中最外層我們定義一個(gè)iframe，代碼如下：
<iframe src="inner.html" id="iframeid" name="iframe" width="500" height="300" frameborder="no" scrolling="auto"></iframe>這樣，我們就創(chuàng)建了一個(gè)名為“iframe”的頁(yè)面內(nèi)嵌框架，接下來(lái)我們就需要在iframe內(nèi)的模板文件inner.html中編寫(xiě)JS方法，在主頁(yè)面中可以通過(guò)Jquery來(lái)調(diào)用到這個(gè)方法，具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<script>
function sendMessage(msg) {
alert(msg);
}
</script>
</body>
</html>這個(gè)示例中，我們?cè)趇nner.html文件中創(chuàng)建了一個(gè)名為“sendMessage”的函數(shù)，它的功能是在接收到信息后彈出一個(gè)提示框，后面我們就可以在main.html中通過(guò)Jquery提交信息，然后調(diào)用這個(gè)函數(shù)，在這里給出調(diào)用代碼：
$('#iframeid')[0].contentWindow.sendMessage('success');這個(gè)代碼將在main.html文件中執(zhí)行，它使用了Jquery來(lái)獲取ifream的DOM對(duì)象，然后通過(guò)JS的原生方法contentWindow來(lái)獲取到inner.html頁(yè)面中的window對(duì)象，接著調(diào)用sendMessage函數(shù)，并且傳入一個(gè)參數(shù)“success”，最后這個(gè)參數(shù)在inner.html頁(yè)面中被alert提示框展示出來(lái)。
在頁(yè)面編寫(xiě)中，使用iframe可以使得開(kāi)發(fā)者方便的將復(fù)雜的頁(yè)面拆成若干個(gè)小的模塊，從而使得代碼的管理更加規(guī)范，具有良好的可讀性和可維護(hù)性，尤其在日常的Web開(kāi)發(fā)工作中，使用iframe是非常常見(jiàn)的開(kāi)發(fā)模式。