집 > 기사 > 웹 프론트엔드 > iframe_jquery에서 요소를 가져오는 jQuery의 일반적인 방법에 대한 자세한 설명

iframe_jquery에서 요소를 가져오는 jQuery의 일반적인 방법에 대한 자세한 설명

WBOY원래의: 2016-05-16 15:19:461226검색

이 기사에서는 iframe에서 요소를 가져오는 jQuery의 일반적인 방법을 분석합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

jquery를 사용하여 iframe의 요소를 가져오는 여러 가지 방법:

iframe 하위 페이지에서 상위 페이지 요소 가져오기

코드는 다음과 같습니다.

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

$('#objId', parent.document);

완료...

상위 페이지에서 iframe 하위 페이지 요소 가져오기:

$("#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이 포함되어 있습니다.

<!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 콘텐츠:

<!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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：Jquery 아코디언 effect_javascript 기술을 쉽게 얻을 수 있습니다.다음 기사：Jquery 아코디언 effect_javascript 기술을 쉽게 얻을 수 있습니다.

iframe_jquery에서 요소를 가져오는 jQuery의 일반적인 방법에 대한 자세한 설명

관련 기사