同域jQuery(跨)iframe操作DOM(實例講解)
更新時間:2013年12月19日 08:50:16 作者:
本篇文章主要是對同域jQuery(跨)iframe操作DOM進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助
frame目前還是比較流行的,許多地方都通過它來實現(xiàn)特殊的情況。比如說傳統(tǒng)的上傳、select在ie6下、代理、跨域等等。今天呢,簡要的記述一下跨iframe的相關操作,主要是用jQuery操作DOM結構方面。
復制代碼 代碼如下:
<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學習筆記之jQuery的DOM操作
- 基于jquery的關于動態(tài)創(chuàng)建DOM元素的問題
- 讀jQuery之五(取DOM元素)
- JQuery動態(tài)創(chuàng)建DOM、表單元素的實現(xiàn)代碼
- JQuery each()函數(shù)如何優(yōu)化循環(huán)DOM結構的性能
- jQuery移動和復制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)之事件體系結構
- jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件包裝
- Jquery1.9.1源碼分析系列(六)延時對象應用之jQuery.ready
- jQuery 1.9.1源碼分析系列(十)事件系統(tǒng)之主動觸發(fā)事件和模擬冒泡處理
- Jquery-1.9.1源碼分析系列(十一)之DOM操作
相關文章
jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新功能
這篇文章主要介紹了jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新操作,使用jquery的ajaxform插件是一個比較不錯的選擇。具體實現(xiàn)工程大家參考下本文2018-01-01jQuery animate和CSS3相結合實現(xiàn)緩動追逐效果附源碼下載
這篇文章主要介紹了jQuery animate和CSS3相結合實現(xiàn)緩動追逐效果的相關資料,需要的朋友可以參考下2016-04-04jQuery+CSS實現(xiàn)的標簽頁效果示例【測試可用】
這篇文章主要介紹了jQuery+CSS實現(xiàn)的標簽頁效果,涉及基于jQuery的事件綁定、頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-08-08