iframe의 jQuery 도메인 간 작업 DOM 메서드

php中世界最好的语言
풀어 주다: 2018-04-26 15:19:16
원래의
6118명이 탐색했습니다.

이번에는 iframe에서의 jQuery 크로스 도메인 DOM 방식을 소개하겠습니다. iframe에서 DOM메서드의 jQuery 크로스 도메인 작업 시 주의사항은 무엇입니까, 실제 사례는 다음과 같습니다. 살펴보겠습니다. .

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

<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">
로그인 후 복사
$(&#39;#read-aa&#39;).click(function() 
{ 
    var v=$(&#39;#aa&#39;).contents().find(&#39;body&#39;).html(); 
    alert(v); 
}); 
$(&#39;#write-aa&#39;).click(function() 
{ 
    $(&#39;#aa&#39;).contents().find(&#39;p&#39;).append(&#39;<hr>这是index.php操作aa.php写入的内容&#39;); 
});
로그인 후 복사

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

2. iframe 상위 프레임 작업 iframe

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</title> 
<script src="public/jQuery.js"></script> 
<script> 
$(function() 
{ 
    $(&#39;#read-parent-aa&#39;).click(function() 
    { 
        var v=$(&#39;body&#39;,parent.document).find(&#39;#aa&#39;).contents().find(&#39;body&#39;).html(); 
        alert(v); 
    }); 
    $(&#39;#write-parent-aa&#39;).click(function() 
    { 
        $(&#39;body&#39;,parent.document).find(&#39;#aa&#39;).contents().find(&#39;p&#39;).append(&#39;<hr>这是bb.php操作aa.php写入的内容&#39;); 
    }); 
}); 
</script> 
<p>
로그인 후 복사

iframe #bb

</p> 
<input type="button" id="read-parent-aa" value="跨父读取iframe #aa"> 
<input type="button" id="write-parent-aa" value="跨父写入iframe #aa">
로그인 후 복사

HTML의 내용입니다. code

<!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()
{
 $(&#39;#read-aa&#39;).click(function()
 {
  var v=$(&#39;#aa&#39;).contents().find(&#39;body&#39;).html();
  alert(v);
 });
 $(&#39;#write-aa&#39;).click(function()
 {
  $(&#39;#aa&#39;).contents().find(&#39;p&#39;).append(&#39;<hr>这是index.php操作aa.php写入的内容&#39;);
 });
});
</script>
로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨을 것입니다. 자세한 내용은 PHP 중국어 웹사이트 기타관련 기사를 주목해주세요!

추천 자료:

JSONP는 ajax 도메인 간 문제를 코드로 해결합니다.

json 데이터를 전달하는 php+jquery 구현 방법

위 내용은 iframe의 jQuery 도메인 간 작업 DOM 메서드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿