집 >웹 프론트엔드 >JS 튜토리얼 >jQuery는 iframe에서 요소 값을 가져옵니다.

jQuery는 iframe에서 요소 값을 가져옵니다.

php中世界最好的语言원래의: 2018-04-24 14:52:583270검색

이번에는 iframe에서 요소 값을 가져오는 jQuery를 가져왔습니다. jQuery가 iframe에서 요소 값을 가져오는 데 있어 주의사항은 무엇인가요?

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

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

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

완료...

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

$("#objid",document.frames('iframename').document)
$(document.getElementById('iframeId').contentWindow.document.body).html()

본문 표시 iframe에서 요소의 콘텐츠입니다.

$("#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>
<p id="test">www.jb51.net</p>
</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. jQuery를 사용하여 index.html에서 액세스:

$("#koyoz").contents().find("#test").css('color','red');

이 코드의 효과는 JS 직접 액세스와 동일합니다. jQuery 프레임워크로 인해 코드가 더 짧아졌습니다.

몇 가지 예를 수집하세요. 인터넷에서 :

jQuery를 사용하여 IFRAME의 상위 창에 있는 요소 값을 얻는 것은 DOM 메서드와 jquery 메서드를 결합해야만 달성할 수 있습니다

1. 상위 창

$(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");

이 기사의 사례를 읽은 후 마스터했습니다. 더 흥미로운 방법을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!