同域jQuery(跨)iframe操作DOM(實例講解)
frame目前還是比較流行的,許多地方都通過它來實現(xiàn)特殊的情況。比如說傳統(tǒng)的上傳、select在ie6下、代理、跨域等等。今天呢,簡要的記述一下跨iframe的相關(guān)操作,主要是用jQuery操作DOM結(jié)構(gòu)方面。
<iframe src="a.php" id="aa"></iframe>
<iframe src="b.php" id="bb"></iframe>
<input type="button" id="read-aa" value="讀取iframe #aa">
<input type="button" id="write-aa" value="寫入iframe #aa">
$('#read-aa').click(function()
{
var v=$('#aa').contents().find('body').html();
alert(v);
});
$('#write-aa').click(function()
{
$('#aa').contents().find('div').append('<hr>這是index.php操作aa.php寫入的內(nèi)容');
});
主要方法是 contents(),讀取iframe。
2、iframe跨父框架操作iframe
<!DOCTYPE html>
<meta charset="utf-8">
<title>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</title>
<script src="public/jQuery.js"></script>
<script>
$(function()
{
$('#read-parent-aa').click(function()
{
var v=$('body',parent.document).find('#aa').contents().find('body').html();
alert(v);
});
$('#write-parent-aa').click(function()
{
$('body',parent.document).find('#aa').contents().find('div').append('<hr>這是bb.php操作aa.php寫入的內(nèi)容');
});
});
</script>
<div>
這是iframe #bb里的內(nèi)容
</div>
<input type="button" id="read-parent-aa" value="跨父讀取iframe #aa">
<input type="button" id="write-parent-aa" value="跨父寫入iframe #aa">
HTML:代碼
<!DOCTYPE html>
<meta charset="utf-8">
<title>jQuery操作iframe</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<iframe src="a.php" id="aa"></iframe>
<iframe src="b.php" id="bb"></iframe>
<input type="button" id="read-aa" value="讀取iframe #aa">
<input type="button" id="write-aa" value="寫入iframe #aa">
<script>
$(function()
{
$('#read-aa').click(function()
{
var v=$('#aa').contents().find('body').html();
alert(v);
});
$('#write-aa').click(function()
{
$('#aa').contents().find('div').append('<hr>這是index.php操作aa.php寫入的內(nèi)容');
});
});
</script>
- jQuery學(xué)習(xí)筆記之jQuery的DOM操作
- 基于jquery的關(guān)于動態(tài)創(chuàng)建DOM元素的問題
- 讀jQuery之五(取DOM元素)
- JQuery動態(tài)創(chuàng)建DOM、表單元素的實現(xiàn)代碼
- JQuery each()函數(shù)如何優(yōu)化循環(huán)DOM結(jié)構(gòu)的性能
- jQuery移動和復(fù)制dom節(jié)點實用DOM操作案例
- jQuery的DOM操作之刪除節(jié)點示例
- jquery選擇器排除某個DOM元素的方法(實例演示)
- jQuery1.9.1針對checkbox的調(diào)整方法(prop)
- Jquery方式獲取iframe頁面中的 Dom元素
- jQuery函數(shù)的第二個參數(shù)獲取指定上下文中的DOM元素
- jQuery 刪除/替換DOM元素的幾種方式
- jQuery 如何先創(chuàng)建、再修改、后添加DOM元素
- jQuery如何將選中的對象轉(zhuǎn)化為原始的DOM對象
- jQuery 1.9.1源碼分析系列(十)事件系統(tǒng)之綁定事件
- jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件體系結(jié)構(gòu)
- jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件包裝
- Jquery1.9.1源碼分析系列(六)延時對象應(yīng)用之jQuery.ready
- jQuery 1.9.1源碼分析系列(十)事件系統(tǒng)之主動觸發(fā)事件和模擬冒泡處理
- Jquery-1.9.1源碼分析系列(十一)之DOM操作
相關(guān)文章
jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新功能
這篇文章主要介紹了jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新操作,使用jquery的ajaxform插件是一個比較不錯的選擇。具體實現(xiàn)工程大家參考下本文2018-01-01jQuery animate和CSS3相結(jié)合實現(xiàn)緩動追逐效果附源碼下載
這篇文章主要介紹了jQuery animate和CSS3相結(jié)合實現(xiàn)緩動追逐效果的相關(guān)資料,需要的朋友可以參考下2016-04-04JQuery入門——用映射方式綁定不同事件應(yīng)用示例
通過映射的方式,給對象綁定多個事件,可能有很多的童鞋們不從使用過,不過,沒有關(guān)系本文將一一為您詳細(xì)介紹,感興趣的朋友可不要錯過了啊,希望本文對你有所幫助2013-02-02jQuery+CSS實現(xiàn)的標(biāo)簽頁效果示例【測試可用】
這篇文章主要介紹了jQuery+CSS實現(xiàn)的標(biāo)簽頁效果,涉及基于jQuery的事件綁定、頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-08-08