Jquery에서 iframe의 요소를 얻는 몇 가지 방법

8553 단어 jquery
Jquery에서 iframe에서 요소를 가져오는 몇 가지 방법(전재)
iframe는 복합 문서에서 자주 사용되는데 jquery를 이용하여 iframe를 조작하면 효율을 대폭 높일 수 있다. 여기서 기본적인 조작을 수집한다.
DOM 메서드:
상위 창 작업 IFRAME:
window.frames["iframeSon"].document

IFRAME 작업 상위 창:
window.parent.document

jquery 메서드:
부모 창에서 IFRAME의 모든 입력 상자를 선택합니다.
$(window.frames["iframeSon"].document).find(":text");

IFRAME에서 작업을 수행하려면 부모 창의 모든 입력 상자를 선택합니다.
$(window.parent.document).find(":text");

iframe 프레임의 HTML:
<iframe src="test.html" id="iframeSon" width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>

1. 부모 창에서 IFRAME의 모든 라디오 단추를 선택합니다
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

2. IFRAME에서 부모 창의 모든 단추를 선택합니다
$(window.parent.document).find("input[@type='radio']").attr("checked","true");

iframe 프레임의 경우:
<iframe src="test.html" id="iframe1″ width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>
 	<HTML xmlns="http://www.w3.org/1999/xhtml">    
 	<HEAD>    
 	         
 	    <MCE:SCRIPT mce_src="js/jquery-1.2.6.js" src="../js/jquery-1.2.6.js" type="text/ecmascript"></MCE:SCRIPT>    
 	    <MCE:SCRIPT type="text/javascript"><!--   
 	    
 	        $(function(){    
 	            $("#t1").hover(function(){alert('');});    
 	            //$("iframe").contents().find("body").append("I'm in an iframe!");     
 	            //$(window.frames["iframe1"].document).find("input[@type='text']").attr("size","30px");    
 	            //$("#iframe1").contents().find("#d1").css('color','red');    
 	            //$(window.frames["iframe1"].document).find("input[@name='t1']").css({background:"#369"});    
 	            //$("#iframe1").src("test.html");    
 	        });    
 	        
 	// --></MCE:SCRIPT>    
 	     
 	     
 	<DIV>    
 	<INPUT id=t1>    
 	<IFRAME id=iframe1 src="child.htm" mce_src="child.htm"></IFRAME>    
 	<IFRAME height=100 src="child.htm" width=300 mce_src="child.htm"></IFRAME>    
 	</DIV>    
 	<DIV>    
 	</DIV>

Jquery를 사용하여 iframe에서 요소를 가져오는 몇 가지 방법을 수집합니다.
Js 코드
    $(document.getElementById('iframeId').contentWindow.document.body).htm()  
  $(document.getElementById('iframeId').contentWindow.document.body).htm()

iframe에서 body 요소의 내용을 표시합니다.
Js 코드
    
$("#testId", document.frames("iframename").document).html();  
$("#testId", document.frames("iframename").document).html();

iframename에서 ID를 "testId"요소로 가져오기
Js 코드
    $(window.frames["iframeName"].document).find("#testId").html()  

$(window.frames["iframeName"].document).find("#testId").html()

역할이 같다
온라인 예제 수집:
jQuery로 IFRAME에서 부모 창의 요소의 값을 가져옵니다
어쩔 수 없이 DOM 방법과 jquery 방법을 결합하는 방식으로 실현되었다
1. 부모 창에서 IFRAME의 모든 라디오 단추를 선택합니다
인용하다
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
2. IFRAME에서 부모 창의 모든 단추를 선택합니다
$(window.parent.document).find("input[@type='radio']").attr("checked","true");

iframe 프레임의 경우:
<iframe src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

IE7에서 테스트 통과
jquery를 사용하여 iframe 조작
1. 내용에 두 개의 ifame이 있다
<iframe id="leftiframe"...</iframe>
<iframe id="mainiframe..</iframe>

leftiframe에서 jQuery가mainiframe의 src 코드를 변경합니다:

$("#mainframe",parent.document.body).attr("src","http://www.radys.cn")

2. 내용에 메니프레임이라는 아이디가 있는 ifame
<iframe id="mainifame"...></ifame>

ifame에는 someID가 있습니다.
<div id="someID">you want to get this content</div>

someID를 받은 내용입니다.
$("#mainiframe").contents().find("someID").html() html    $("#mainiframe").contains().find("someID").text()

3. 부모 창에서 IFRAME의 모든 단추를 선택합니다
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
그럼 id를 선택하면 자연히find방법을 사용합니다

$(window.frames["iframe1"].document).find("#id")

4. 위에서 보듯이
leftiframe의 jQuery 조작mainiframe의 내용someID의 내용

   $("#mainframe",parent.document.body).contents().find("someID").html()   $("#mainframe",parent.document.body).contents().find("someID").val()

JavaScript를 사용하여 iframe 조작
프레임 간의 상호 인용
한 페이지의 모든 프레임워크는 집합 형식으로 윈도우 대상의 속성으로 제공됩니다. 예를 들어: 윈도우.frames는 이 페이지 안의 모든 프레임워크의 집합을 나타낸다. 이것은 폼 대상, 링크 대상, 그림 대상 등과 유사하지만 다른 것은 이 집합들이document의 속성이다.따라서 하위 프레임을 참조하려면 다음 구문을 사용합니다.

window.frames["frameName"];

window.frames.frameName

window.frames[index]

그 중에서 window 글꼴은 self로 대체하거나 생략할 수 있습니다. 프레임Name이 페이지의 첫 번째 프레임이라고 가정하면 다음과 같은 쓰기 방법은 등가입니다.
self.frames["frameName"]

self.frames[0]

frames[0]

frameName

모든 프레임워크는 HTML 페이지에 대응하기 때문에 이 프레임워크도 하나의 독립된 브라우저 창으로 창의 모든 성질을 가진다. 이른바 프레임워크에 대한 인용, 즉 윈도우 대상에 대한 인용이다.이 윈도우 대상이 있으면 그 중의 페이지를 쉽게 조작할 수 있다. 예를 들어 윈도우를 사용할 수 있다.문서 대상이 페이지에 데이터를 쓰고 window를 사용합니다.location 속성으로 프레임 내의 페이지 등을 변경합니다.
다음은 서로 다른 차원 구조 간의 상호 인용에 대해 소개한다.
1. 부모 프레임에서 하위 프레임까지의 인용
이러한 원리를 이해하면 부모 프레임에서 하위 프레임을 인용하는 것이 매우 쉽다. 즉,

window.frames["frameName"];

이렇게 하면 페이지 내 이름이 프레임Name인 하위 프레임이 참조됩니다.하위 프레임 내의 하위 프레임을 참조하려면 참조된 프레임이 실제로 window 객체의 성격에 따라 다음과 같이 수행할 수 있습니다.

window.frames["frameName"].frames["frameName2"];

이렇게 하면 2급 서브 프레임워크에 인용되고 이런 식으로 유추하면 다층 프레임워크의 인용을 실현할 수 있다.
2. 하위 프레임에서 부모 프레임까지의 인용
모든 window 대상은 부모 프레임워크를 표시하는parent 속성을 가지고 있습니다.만약 이 프레임이 이미 맨 윗부분 프레임이라면, window.parent는 또한 이 프레임 자체를 나타낸다.
3. 형제의 틀 사이의 인용
두 프레임이 같은 프레임의 하위 프레임인 경우 이를 형제 프레임이라고 하며 한 페이지에 두 개의 하위 프레임이 포함된 것과 같이 부모 프레임을 통해 상호 참조할 수 있습니다.

<frameset rows="50%,50%">

<frame src="1.html" name="frame1" />

<frame src="2.html" name="frame2" />

</frameset>

프레임 1에서 다음 문을 사용하여 프레임 2를 참조할 수 있습니다.
self.parent.frames["frame2"];

4. 서로 다른 차원 구조 간의 상호 인용
프레임의 계층은 최상위 프레임에 대한 것입니다.차원이 같지 않으면 자신이 있는 차원과 다른 프레임이 있는 차원과 이름만 알면 프레임이 인용한 window 대상의 성격을 이용하여 서로 쉽게 접근할 수 있다. 예를 들어 다음과 같다.

self.parent.frames["childName"].frames["targetFrameName"];

5. 최상위 프레임에 대한 참조
parent 속성과 유사하며, window 대상에는 top 속성이 하나 더 있습니다.이는 최상위 프레임에 대한 참조를 나타냅니다. 이는 프레임 자체가 최상위 프레임인지 여부를 판단하는 데 사용됩니다. 예를 들어 다음과 같습니다.
//이 프레임이 최상위 프레임인지 판단

if(self==top){

//dosomething

}

다음으로 이동:http://hi.baidu.com/469741414/blog/item/455aaf535df6819f8c5430bf.html
Jquery 플러그인 봉인, Jquery 라이브러리 확장, Jquery 플러그인 봉인 방법
jQuery 동적 추가 이벤트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage