Home » jQuery 技巧

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

[ 日期： | 瀏覽：108,869 | 迴響：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

  4. 這好像沒法子誇網域使用?
    也就是iframe是由在別的網域的內容
    好像會有安全性問題...
    onload後再取也無法取得
    請問有其它方式可以處理嘛?

  6. 男丁大大,最近小的剛巧在研究iframe從父視窗獲取子視窗資訊的方法,
    發現chrome使用起來貌似怪怪的, 可是又不知道如何解決...
    而且很奇怪的一點是,
    小的直接點開大大做的示範頁, chrome可以運行;
    但是把大大示範頁的code抓回電腦, chrome卻又無法運行,
    舉例來說: 大大您的btn1應該要回傳t1的value,可是我按了都只會回應underfind!
    請問大大為何會有這樣的狀況發生呢?
    小弟已經被這困擾好幾天了, google也爬不到類似的文章...

  7. 小的也是懷疑這一點...
    因為小的是想寫一個所有人可以直接在本機執行的頁面,
    目前IE和FF是可以用, 就只有Chrome會出現異常...
    請問有什麼明確的做法可以解決安全性的問題嗎?

  9. 請問跨網域的iframe該如何存取呢?
    看了其他的搜尋是說安全性問題javascript沒辦法存取

    例如我在自己個網頁嵌入yahoo的首頁
    只是想單純的用jquery移除它的footer
    卻怎樣也沒反應..

  10. 謝謝你的範例
    我有是過表格為input 是可正常使用
    如果表格為wysiwyg 的 textarea 表格要怎麼傳遞

    如果abgne_iframe 是wysiwyg 的 textarea 表格
    如何把值是由外部指定到wysiwyg 的 textarea 表格

1 2

發表迴響