iframe의 요소가 존재하는지 확인하는 Node.js 구현 코드-JS 튜토리얼-php.cn

iframe의 요소가 존재하는지 확인하는 Node.js 구현 코드

高洛峰

풀어 주다： 2017-01-12 11:00:48

원래의

1383명이 탐색했습니다.

이 기사에서는 iframe의 요소가 코드에 존재하는지 확인하기 위해 js를 소개합니다. 더 알고 싶은 친구는 참고용으로 입력할 수 있습니다.

1. 순수 원본 js 구현 방법은 다음과 같습니다.

<script>
var bb = document.getElementById(&#39;PreviewArea&#39;).contentWindow.document.getElementById(&#39;aPic&#39;);
if( bb )
{
}
else
{
}
//apic为子页面Preview.aspx里面元素的Id
</script>
<body>
<iframe name="PreviewArea" id="PreviewArea" scrolling="yes" width="100%" height="290" frameborder="1" src="Preview.aspx"></iframe>
</body>

로그인 후 복사

2. 현재 널리 사용되는 jquery 구현 방법은 다음과 같습니다. :

if($(window.frames["iframepage"].document).find(&#39;.l-grid-row-cell&#39;).length > 0){ 
　　alert(1);
}else{
　　alert(2);
}

로그인 후 복사

위 코드는 iframepage ID를 가진 iframe에 1-grid-row-cell의 CSS를 갖는 요소가 존재하는지 확인합니다.
첨부

iframe에서 요소를 가져오는 Jquery의 여러 가지 방법
iframe 하위 페이지에서 상위 페이지 요소 가져오기

$(&#39;#objId&#39;, parent.document);
// 搞定...
在父页面 获取iframe子页面的元素
  
$("#objid",document.frames(&#39;iframename&#39;).document)
$(document.getElementById(&#39;iframeId&#39;).contentWindow.document.body).html()

로그인 후 복사

iframe에 body 요소의 내용 표시

$("#testId", document.frames("iframename").document).html();
根据iframename取得其中ID为"testId"元素
  
$(window.frames["iframeName"].document).find("#testId").html()

로그인 후 복사

2. JS 또는 jQuery를 사용하여 IE와 호환되는 페이지의 iframe에 액세스합니다. /FF
참고: 프레임 내의 페이지는 도메인을 교차할 수 없습니다!
동일한 도메인 아래에 두 개의 페이지가 있다고 가정합니다.
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.php.cn</div>
</body>
</html>

로그인 후 복사

1. 직접 액세스하려면 index.html에서 JS를 실행하세요.

document.getElementById('koyoz' ).contentWindow.document .getElementById('test').style.color='red'

index.html에서 'koyoz'라는 ID 이름으로 iframe 페이지에 접속하여 해당 ID로 iframe 페이지를 얻습니다. 'test' 개체의 이름을 지정하고 색상을 빨간색으로 설정합니다.
이 코드는 테스트되었으며 IE/firefox를 지원할 수 있습니다.
2. index.html에서 jQuery로 액세스:

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

이 코드의 효과는 JS 직접 액세스와 동일합니다. jQuery 프레임워크의 도움으로 코드가 더 짧아졌습니다.
또한 일부 네티즌은 다음과 같은 예를 제공했습니다.
jQuery를 사용 IFRAME에서 상위 창의 요소 값을 얻으려면 DOM 메서드와 jquery 메서드를 조합하여 사용해야 합니다.

1. 상위 창

$(window.frames["iframe1"].document).find("input:radio")의 IFRAME에서 모든 라디오 버튼을 선택합니다. "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")

iframe의 요소가 존재하는지 확인하기 위한 추가 js 관련 기사 구현 코드를 보려면 PHP 중국어 웹사이트를 주목하세요!