在開發中,我們有時需要在iframe中嵌入另一個網頁或者應用程序來實現一些功能。但是在iframe中只要單純的使用JavaScript或jQuery,是無法直接調用iframe內部的函數的,這時候我們就需要用到jQuery的幾個方法來實現這個功能了。
首先我們需要給iframe添加一個id屬性,在jQuery中調用,然后我們就可以使用如下的代碼來獲取iframe內部的窗口對象:
var innerDoc = $('#iframe_id')[0].contentWindow.document;
代碼中的$是jQuery對象,$('#iframe_id')就是選擇器的語法,用于選擇id為"iframe_id"的對象。而[0]則是用于獲取原生的DOM對象。然后我們就可以通過獲取到的innerDoc來調用窗口內部的函數了。
比如我們有這么一個頁面:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>iframe demo</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> function hello(){ alert('Hello world!'); } </script> </head> <body> <button onclick="hello()">Click me</button> </body> </html>
按鈕被點擊就會彈出“Hello world!”的框。要在我們的主頁面中調用hello函數,我們需要這樣寫代碼:
var innerDoc = $('#iframe_id')[0].contentWindow.document; innerDoc.getElementById('button_id').click();
代碼中的getElementById是獲取內部元素的語法,用于獲取id為"button_id"的元素并用click方法觸發。這時候我們就可以在主頁面中調用iframe內部的函數了。