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

最新推荐文章于 2024-01-07 23:38:29 发布

xinew

最新推荐文章于 2024-01-07 23:38:29 发布

阅读量2k

点赞数

文章标签： iframe function button safari chrome javascript

本文链接：https://blog.csdn.net/xinew/article/details/5869821

版权

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

作者：男丁格爾 | 日期： 2010-07-29 | 分類： jQuery 技巧 | 瀏覽：740 | 留言： 3

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

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

^? 檢視原始碼 HTML

<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

<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

$(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 無法順利的存取控制元素。還有就是在本機會有安全性的問題而發生錯誤，這只要把檔案放在主機上就不會有問題了。

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

範例瀏覽：
http://demonstration.abgne.tw/jquery/tips/0007/0007_1.html
http://demonstration.abgne.tw/jquery/tips/0007/0007_2.html(Not Work on Chrome, Safari)

http://abgne.tw/jquery/jquery-tips/jquery-access-iframe-element-func.html

xinew

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[jQ]如何存取控制 iframe 中的元素及方法

<br />[jQ]如何存取控制 iframe 中的元素及方法作者：男丁格爾 | 日期：2010-07-29 | 分類：jQuery 技巧 | 瀏覽：740 | 留言：3<br />前幾天剛好在某個討論區看到有網友提問如果呼叫使用定義在 iframe 中的方法，今天同事也問到如果存取控制 iframe 中的內容。所以趁著中午休息時間整理個範例來一次解決這兩個問題。<br /><br />首先準備要給 iframe 用的 abgne_iframe.html 網頁內容及設定一些事件：?檢視原始碼 HTML
复制链接

扫一扫