首頁  >  文章  >  web前端  >  同域jQuery(跨)iframe操作DOM(範例程式碼)_jquery

同域jQuery(跨)iframe操作DOM(範例程式碼)_jquery

WBOY
WBOY原創
2016-05-16 17:09:141211瀏覽

frame目前還是比較流行的,許多地方都透過它來實現特殊的情況。比如說傳統的上傳、select在ie6下、代理、跨域等等。今天呢,簡單的記述一下跨iframe的相關操作,主要是用jQuery操作DOM結構方面。

複製程式碼 程式碼如下:






複製程式碼 程式碼如下:

$('#read-aa').click(function()
{
   v=$('#aa').contents().find('body').html();
    alert(v);
});
$('#write-aa' ).click(function()
{

    $('#aa').contents().find('div').append('
這是index.php作業aa. php寫入的內容');
});

主要方法是contents(),讀取iframe。

2、iframe跨父框架操作iframe

複製程式碼 程式碼如下:

























bbbbbbbbb <script> <BR>$(function() <div class="codetitle">{ <span>    $('#read-parent-aa').click(function() <a style="CURSOR: pointer" data="48342" class="copybut" id="copybut48342" onclick="doCopy('code48342')">    { <> ,parent.document).find('#aa').contents().find('body').html(); <U>        alert(v);     });  write-parent-aa').click(function()     {        $('body',parent.document).find('#aa').contents().find('divparent.document).find('#aa').contents().find('divparent.). append('<hr>這是bb.php作業aa.php寫入的內容'); <div class="codebody" id="code48342">    }); <BR>}); <BR></script> <br><div> <br>這是iframe #bb裡的內容<br> </div> <br><input type="button" id="read-parent-aa" value="跨父讀取iframe #aa"> <br><br><br><br>HTML:程式碼<br><br><br><br><br>複製程式碼<br><br><br> 程式碼如下:<br><br><br><br><meta charset="utf-8"> <br><title>jQuery操作iframe
<script> <🎜>$(function()<🎜>{<🎜> $('#read-aa').click(function()<🎜> {<🎜>  var v=$('#aa').contents#aa').contents ().find('body').html();<🎜>  alert(v);<🎜> });<🎜> $('#write-aa').click(function()<🎜> { <🎜><🎜>  $('#aa').contents().find('div').append('<hr>這是index.php作業aa.php寫入的內容');<🎜> });<🎜>});<🎜></script>
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn