> 웹 프론트엔드 > JS 튜토리얼 > iframe_jquery에서 요소를 가져오는 jQuery의 일반적인 방법에 대한 자세한 설명

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

WBOY
풀어 주다: 2016-05-16 15:19:46
원래의
1295명이 탐색했습니다.

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

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