iframe의 요소가 존재하는지 확인하는 Node.js 구현 코드
- 高洛峰원래의
- 2017-01-12 11:00:481320검색
이 기사에서는 iframe의 요소가 코드에 존재하는지 확인하기 위해 js를 소개합니다. 더 알고 싶은 친구는 참고용으로 입력할 수 있습니다.
1. 순수 원본 js 구현 방법은 다음과 같습니다.
<script>
var bb = document.getElementById('PreviewArea').contentWindow.document.getElementById('aPic');
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('.l-grid-row-cell').length > 0){
alert(1);
}else{
alert(2);
}
위 코드는 iframepage ID를 가진 iframe에 1-grid-row-cell의 CSS를 갖는 요소가 존재하는지 확인합니다.
첨부
iframe에서 요소를 가져오는 Jquery의 여러 가지 방법
iframe 하위 페이지에서 상위 페이지 요소 가져오기
$('#objId', parent.document);
// 搞定...
在父页面 获取iframe子页面的元素
$("#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()
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 중국어 웹사이트를 주목하세요!