집 > 기사 > 웹 프론트엔드 > iframe의 모든 수준의 요소, 콘텐츠 또는 ID를 얻기 위한 Jquery의 인스턴스 방법에 대한 자세한 설명

iframe의 모든 수준의 요소, 콘텐츠 또는 ID를 얻기 위한 Jquery의 인스턴스 방법에 대한 자세한 설명

伊谢尔伦원래의: 2017-06-19 13:19:142444검색

iframe 하위 페이지에서 상위 페이지의 요소를 가져옵니다.
코드는 다음과 같습니다.

$(&#39;#objId&#39;, parent.document);
// 搞定...

상위 페이지에서 iframe 하위 페이지의 요소를 가져옵니다.
코드는 다음과 같습니다.

$("#objid",document.frames(&#39;iframename&#39;).document)
$(document.getElementById(&#39;iframeId&#39;).contentWindow.document.body).html()
$("#testId", document.frames("iframename").document).html();

ID가 있는 요소를 가져옵니다. iframename

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

JS를 사용하거나 jQuery페이지의 iframe에 액세스하세요. IE/FF와 호환됩니다.
참고: frame의 페이지는 도메인을 넘을 수 없습니다.

페이지가 두 개 있다고 가정해 보세요.
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.koyoz.com</div>  
</body>  
</html>

1이 포함되어 있습니다. index.html에서 JS를 실행하여 다음 항목에 직접 액세스하세요. index.html에서 ID 이름이 'koyoz'인 iframe 페이지를 열고 이 iframe 페이지에서 ID가 'test'인
객체 를 얻고 색상을 빨간색으로 설정하세요. 이 코드는 테스트되었으며 IE/를 지원할 수 있습니다.

2. index.html에서 jQuery 사용하기:

JavaScript 코드

document.getElementById(&#39;koyoz&#39;).contentWindow.document.getElementById
(&#39;test&#39;).style.color=&#39;red&#39;

이 코드의 효과는 jQuery 프레임워크의 도움으로 코드가 더 짧아졌습니다.

위 내용은 iframe의 모든 수준의 요소, 콘텐츠 또는 ID를 얻기 위한 Jquery의 인스턴스 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Jquery의 size() 길이 차이에 대한 자세한 설명다음 기사：Jquery의 size() 길이 차이에 대한 자세한 설명