iframe의 모든 수준의 요소, 콘텐츠 또는 ID를 얻기 위한 Jquery의 인스턴스 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

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

伊谢尔伦

풀어 주다： 2017-06-19 13:19:14

원래의

2469명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!