>  기사  >  웹 프론트엔드  >  동일 도메인 jQuery(교차) iframe 작업 DOM(샘플 코드)_jquery

동일 도메인 jQuery(교차) iframe 작업 DOM(샘플 코드)_jquery

WBOY
WBOY원래의
2016-05-16 17:09:141212검색

프레임은 현재에도 여전히 인기가 높으며, 특별한 상황을 구현하기 위해 여러 곳에서 사용됩니다. 예를 들어 기존 업로드, ie6, 프록시, 교차 도메인 등에서 선택합니다. 오늘은 주로 jQuery를 사용하여 DOM 구조를 조작하는 등 iframe 전반에 걸친 관련 작업에 대해 간략하게 설명하겠습니다.

코드 복사 코드는 다음과 같습니다.






코드 복사 코드는 다음과 같습니다.

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

$('#aa').contents().find('div'). append('< ;hr>aa.php 구동 시 index.php로 작성한 내용입니다.')
});

주요 메소드는 iframe을 읽는 content()입니다. .

2. iframe 교차 상위 프레임 작업 iframe

코드 복사 코드는 다음과 같습니다.

< ;!DOCTYPE html>

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb ">< ;/script>
<script> <br>$(function() <br>{ <br> $('#read-parent-aa').click(function() <br> { <br> var v=$('body',parent.document).find('#aa').contents().find('body').html() <br> 경고(v); 🎜> }) ; <br> $('#write-parent-aa').click(function() <br> { <br> $('body',parent.document).find('#aa') .contents() .find('div').append('<hr>aa.php를 실행할 때 작성한 내용입니다.') <br> }) <br></script&gt ; <BR><div> <br>iframe #bb의 콘텐츠입니다<br></div><br><input type="button" id="read-parent- aa" value=" 상위 #aa에서 iframe 읽기"> <br><input type="button" id="write-parent-aa" value="상위 #aa에서 iframe 쓰기"><br><br><br>HTML: 코드<br> </div> <br><br><div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="48342" class="copybut" id="copybut48342" onclick="doCopy('code48342')"><u> 코드는 다음과 같습니다.</u></a></span>&lt ;!DOCTYPE html></div><meta charset="utf-8"><div class="codebody" id="code48342"><title>jQuery 작업 iframe</title><br><script src="http://ajax.googleapis .com/ajax/libs /jquery/1.7.2/jquery.min.js"></script>