js 조작 iframe 호 환 각종 주류 브 라 우 저 예제 코드

프로젝트 를 하 다가 iframe 을 조작 하 는 문제 에 부 딪 혔 습 니 다.업 무 는 매우 간단 합 니 다.사실은 iframe 내부 의 한 창 을 조작 할 때 부모 창의 함 수 를 호출 하 는 것 입 니 다.그래서 두 개의 간단 한 htm 페이지 를 써 서 테스트 를 했 는데 인터넷 에서 유행 하 는 방법 으로 구 글 브 라 우 저 에서 항상 오 류 를 보고 하고 통과 할 수 없 었 다.부모 페이지 parent.html 의 코드 는 다음 과 같다

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 
</title> 
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function ParentFunction() { 
alert('ParentFunction'); 
} 
</script></head> 
<body> 
<input type="button" id="btnCancel" class="button" value="  " /> 
<iframe id="FRMdetail" name="FRMdetail" frameborder="0" src='child.html' style="width:100%;height:100%;" ></iframe> 
</body> 
</html>

하위 페이지 child.html 의 코드 는 다음 과 같다

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 
</title> 
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#btnTest").click(function (e) { 
var t=window.parent; 
t.ParentFunction(); 
}); 
}) 
</script></head> 
<body> 
<input type="button" id="btnTest" class="button" value="      " />rrr 
</body> 
</html>

네트워크 에서 유행 하 는 방법 var t=window.parent;t.ParentFunction();IE 에서 호출 할 수 있 지만 구 글 브 라 우 저 에 서 는 항상 다음 과 같은 오 류 를 알려 줍 니 다.Blocked a frame with origin"null"from accessing a frame with origin"null".Protocols,domains,and ports must match.인터넷 에서 오랫동안 방법 을 찾 지 못 했 고 어떤 것 도 오래전 버 전 으로 거의 쓸모 가 없 었 으 며 테스트 도 거의 하지 않 았 습 니 다.그래서 스스로 모색 한 결과 구 글 브 라 우 저 는 사실 그런 방법 도 가능 하 다 는 것 을 알 게 되 었 다.다만 이상 하 게 발표 해 야 파일 시스템 에서 호출 하면 위의 오류 가 발생 할 수 있다.사실은 html 5 의 방법 postmessage 가 있 기 때문에 이에 따라 고 쳤 습 니 다.최종 코드 는 다음 과 같 습 니 다.부모 페이지 parent.html 의 코드 는 다음 과 같 습 니 다

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 
</title> 
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
this.ParentFunction= function() {//           ，       this     ，     this  windows 
alert('ParentFunction'); 
} 
// function ParentFunction() { 
// alert('ParentFunction'); 
// } 
function receiveMessage(e) { 
var data = e.data; 
if(data=="ParentFunction") 
{ 
ParentFunction() ; 
} 
} 
if (typeof window.addEventListener != 'undefined') {//  html5  postMessage      
window.addEventListener('message', receiveMessage, false); 
} else if (typeof window.attachEvent != 'undefined') { 
window.attachEvent('onmessage', receiveMessage); 
} 
</script></head> 
<body> 
<input type="button" id="btnCancel" class="button" value="  " /> 
<iframe id="FRMdetail" name="FRMdetail" frameborder="0" src='child.html' style="width:100%;height:100%;" ></iframe> 
</body> 
</html>

하위 페이지 child.html 의 코드 는 다음 과 같 습 니 다

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 
</title> 
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#btnTest").click(function (e) { 
var t=window.parent; 
if(!t.ParentFunction)//     ，  html5  postMessage   
{ 
t.postMessage("ParentFunction", '*'); 
} 
else 
{ 
t.ParentFunction(); 
} 
}); 
}) 
</script></head> 
<body> 
<input type="button" id="btnTest" class="button" value="      " />rrr 
</body> 
</html>

.고 친 후에 파일 시스템 에서 도 그 오류 가 발생 할 수 있 지만 호출 해 야 할 방법 은 확실히 호출 되 었 습 니 다.목적 은 확실히 달성 되 었 습 니 다.사용 에 영향 을 주지 않 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

puppeteer로 iframe의 요소를 조작합니다.

iframe내에 버튼을 준비해, 그 버튼을 누르면 버튼의 색이 바뀌는 만큼의 페이지를 만듭니다. app/index.html app/iframe.html puppeteer의 코드를 작성합니다. app/script.js...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

js 조작 iframe 호 환 각종 주류 브 라 우 저 예제 코드

좋은 웹페이지 즐겨찾기