Home » jQuery 技巧

[jQ]如何存取控制 iframe 中的元素及方法

[ 日期： | 瀏覽：108,705 | 迴響：20 ]

前幾天剛好在某個討論區看到有網友提問如果呼叫使用定義在 iframe 中的方法，今天同事也問到如果存取控制 iframe 中的內容。所以趁著中午休息時間整理個範例來一次解決這兩個問題。

首先準備要給 iframe 用的 abgne_iframe.html 網頁內容及設定一些事件：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script type="text/javascript">
	$(function() {
		$('#sbtn1').click(function(){
			alert('我是 iframe 裡的按鈕喔!!');
		});
	});
 
	function iframeMethod(){
		alert('我是定義在 iframe 中的方法');	
	}
</script>
 
<body>
	<form method="post" action="">
		<input type="text" name="t1" id="t1" value="我是 iframe 中的輸入框" />
		<input type="text" name="t2" id="t2" />
		<input type="button" value="Click" id="sbtn1" />
	</form>
	Author: <a href="http://abgne.tw">http://abgne.tw</a>
</body>

這邊筆者只是放了兩個輸入框及一個按鈕，接著幫按鈕加上了 click 事件及事先定義好一個 iframeMethod() 方法。再來就是主要用來嵌入 iframe 的網頁：

檢視原始碼 HTML
1
2
3
4
5
6
7
8

<body>
	<input type="button" value="Get t1" id="btn1" />
	<input type="button" value="Set t2" id="btn2" />
	<input type="button" value="Click sbtn1" id="btn3" />
	<input type="button" value="Call iframeMethod" id="btn4" />
	<br /><br />
	<iframe id="abgne_iframe" src="abgne_iframe.html">你的瀏覽器竟然不支援 iframe ?!</iframe>
</body>

這邊就先幫 iframe 加上個 id 屬性，接著我們再一一來加上事件及動作：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

$(function() {
	$('#abgne_iframe').load(function(){
		var $iframe = $(this), 
			$contents = $iframe.contents();
 
		// 取得 iframe 中的元素
		$('#btn1').click(function(){
			alert($contents.find('#t1').val());
		});
 
		// 設定 iframe 中的元素
		$('#btn2').click(function(){
			$contents.find('#t2').val('我的值是由外部指定的!!');
			$contents.find('#t2').css('color', 'red');
		});
 
		// 控制 iframe 中的按鈕觸發事件
		$('#btn3').click(function(){
			$contents.find('#sbtn1').click();
		});
 
		// 執行 iframe 中定義的方法
		$('#btn4').click(function(){
			$iframe.get(0).contentWindow.iframeMethod();
		});
 
		// 執行各種動作時可以再判斷 $contents 是否為 null
	});
});

從程式中來看，如果要存取 iframe 中的元素的話，可以使用 .contents() 後再來 .find()；但如果是要呼叫 iframe 中定義的方法時，得用 .contentWindow 這屬性才行喔。

另外需要特別注意的是，要取得 .contents() 的部份最好事寫在 iframe 載完之後才執行，否則可能會導致 Chrome 及 Safari 無法順利的存取控制元素。還有就是在本機會有安全性的問題而發生錯誤，這只要把檔案放在主機上就不會有問題了。

其它的只要遵守這樣規則寫出來的程式就能在各瀏覽器中正常執行了。

範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

20 筆針對 [jQ]如何存取控制 iframe 中的元素及方法 的迴響

1 2

  1. to 男丁格爾大大
    我試過有些版本的wysiwyg是可以
    有些不行
    所以我不了解是wysiwyg 的問題 還是jquery寫法的問題
    想知道有辦法解決無法傳值給wysiwyg的問題

1 2

發表迴響