이 기사에서는 iframe에서 요소를 가져오는 jQuery의 일반적인 방법을 분석합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
jquery를 사용하여 iframe의 요소를 가져오는 여러 가지 방법:
iframe 하위 페이지에서 상위 페이지 요소 가져오기
코드는 다음과 같습니다.
$('#objId', parent.document);
완료...
상위 페이지에서 iframe 하위 페이지 요소 가져오기:
1 2 | $( "#objid" ,document.frames( 'iframename' ).document)
$(document.getElementById( 'iframeId' ).contentWindow.document.body).html()
|
로그인 후 복사
iframe에 body 요소의 콘텐츠를 표시합니다.
$("#testId", document.frames("iframename") .document) .html();
iframename을 기반으로 ID가 "testId"인 요소 가져오기
$(window.frames["iframeName"].document).find ("# testId").html()
JS 또는 jQuery를 사용하여 IE/FF와 호환되는 페이지의 iframe에 액세스하세요
참고: 프레임 내의 페이지는 도메인을 넘을 수 없습니다!
동일한 도메인에 두 개의 페이지가 있다고 가정해 보겠습니다.
index.html 파일에는 iframe이 포함되어 있습니다.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" />
<title>页面首页</title>
</head>
<body>
<iframe src= "iframe.html" id= "koyoz" height= "0" width= "0" ></iframe>
</body>
</html>
|
로그인 후 복사
iframe.html 콘텐츠:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" />
<title>iframe.html</title>
</head>
<body>
<div id= "test" >www.jb51.net</div>
</body>
</html>
|
로그인 후 복사
1. 직접 액세스하려면 index.html에서 JS를 실행하세요.
document.getElementById('koyoz').contentWindow.document .getElementById( 'test').style.color='red'
index.html에서 ID 이름이 'koyoz'인 iframe 페이지에 액세스하고, 이 iframe 페이지에서 ID 이름이 'test'인 개체를 얻은 다음 색상을 빨간색으로 설정합니다.
이 코드는 테스트를 거쳤으며 IE/firefox를 지원할 수 있습니다.
2. index.html에서 jQuery로 액세스:
$("#koyoz").contents().find(" #테스트" ).css('color','red');
이 코드의 효과는 JS 직접 액세스와 동일합니다. jQuery 프레임워크 덕분에 코드가 더 짧아졌습니다.
인터넷에서 몇 가지 예를 수집하세요.
jQuery를 사용하여 IFRAME에서 상위 창 요소의 값을 얻는 것은 DOM 메서드와 jquery 메서드를 결합해야만 얻을 수 있습니다
1. 상위 창에서 작동하고 IFRAME에서 모든 라디오 버튼을 선택합니다.
$(window.frames["iframe1"].document).find ("input :radio").attr("checked","true");
2. IFRAME에서 작동하고 상위 창에서 모든 라디오 버튼을 선택합니다
$(window.parent.document).find("input:radio ").attr("checked","true");
상위 창이 IFrame에서 Iframe을 가져오려는 경우 다음과 같이 프레임 하위를 추가하면 됩니다.
$(window.frames["iframe1"].frames["iframe2 "].document).find("input:radio").attr("checked","true");
이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.