iframe 와 메 인 프레임 워 크 크로스 도 메 인 상호 접근 실현 방법
8460 단어 iframe메 인 프레임 크로스 필드
A.html 와 b.html domain 이 모두 localhost(같은 도 메 인)라 고 가정 합 니 다.
A.html 에 iframe 이 B.html,name=my frame 에 삽입 되 어 있 습 니 다.
A.html 에는 js function fmain()이 있 습 니 다.
B.html 에는 js function fIframe()
A.html 호출 B.html 의 fIframe(),B.html 호출 A.html 의 fmain()이 필요 합 니 다.
A.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> main window </title>
<script type="text/javascript">
// main js function
function fMain(){
alert('main function execute success');
}
// exec iframe function
function exec_iframe(){
window.myframe.fIframe();
}
</script>
</head>
<body>
<p>A.html main</p>
<p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>
<iframe src="B.html" name="myframe" width="500" height="100"></iframe>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> iframe window </title>
<script type="text/javascript">
// iframe js function
function fIframe(){
alert('iframe function execute success');
}
// exec main function
function exec_main(){
parent.fMain();
}
</script>
</head>
<body>
<p>B.html iframe</p>
<p><input type="button" value="exec main function" onclick="exec_main()"></p>
</body>
</html>
B.html 의 exec main function button 을 클릭 하여 성공 적 으로 실행 하고 main function execute success 를 팝 업 합 니 다.아래 그림
2.도 메 인 간 상호 방문
A.html domain 이 localhost 라 고 가정 하면 B.html domain 은 127.0.0.1(크로스 필드)입 니 다.
여기 서 localhost 와 127.0.0.1 을 사용 하면 테스트 가 편리 할 뿐 localhost 와 127.0.0.1 은 이미 하나의 도 메 인 이 다 르 기 때문에 실행 효 과 는 같 습 니 다.
실제 사용 시 www.domaina.com 과 www.domainb.com 으로 바 꾸 면 된다.
A.html 에 iframe 이 B.html,name=my frame 에 삽입 되 어 있 습 니 다.
A.html 에는 js function fmain()이 있 습 니 다.
B.html 에는 js function fIframe()
A.html 호출 B.html 의 fIframe(),B.html 호출 A.html 의 fmain()(크로스 필드 호출)이 필요 합 니 다.
위 와 같은 도 메 인 방법 을 사용 하면 브 라 우 저가 A.html 와 B.html 의 다른 도 메 인 을 판단 하면 오류 알림 이 있 을 수 있 습 니 다.
Uncaught SecurityError: Blocked a frame with origin "http://localhost" from accessing a frame with origin "http://127.0.0.1". Protocols, domains, and ports must match.
실현 원리:
브 라 우 저 는 보안 을 위해 도 메 인 접근 을 금 지 했 기 때문이다.따라서 호출 과 실 행 된 쌍방 이 같은 도 메 인 이면 서로 방문 할 수 있다.
우선,A.html 는 B.html 의 fIframe 방법 을 어떻게 호출 합 니까?
1.A.html 에 iframe 만 들 기
2.iframe 페이지 는 B.html 같은 도 메 인 에 놓 여 execB.html 라 고 명명 되 었 습 니 다.
3.execB.html 에 B.html fIframe 방법 을 호출 하 는 js 호출 이 있 습 니 다.
<script type="text/javascript">
parent.window.myframe.fIframe(); // execute parent myframe fIframe function
</script> 마찬가지 로 B.html 는 A.html fmain 방법 을 호출 해 야 하고 B.html 에 A.html 와 같은 도 메 인 에 있 는 execA.html 를 삽입 해 야 합 니 다.
execA.html 에 A.html fmain 방법 을 호출 하 는 js 호출 이 있 습 니 다.
<script type="text/javascript">
parent.parent.fMain(); // execute main function
</script> A.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> main window </title>
<script type="text/javascript">
// main js function
function fMain(){
alert('main function execute success');
}
// exec iframe function
function exec_iframe(){
if(typeof(exec_obj)=='undefined'){
exec_obj = document.createElement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = 'http://127.0.0.1/execB.html';
exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);
}else{
exec_obj.src = 'http://127.0.0.1/execB.html?' + Math.random();
}
}
</script>
</head>
<body>
<p>A.html main</p>
<p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>
<iframe src="http://127.0.0.1/B.html" name="myframe" width="500" height="100"></iframe>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> iframe window </title>
<script type="text/javascript">
// iframe js function
function fIframe(){
alert('iframe function execute success');
}
// exec main function
function exec_main(){
if(typeof(exec_obj)=='undefined'){
exec_obj = document.createElement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = 'http://localhost/execA.html';
exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);
}else{
exec_obj.src = 'http://localhost/execA.html?' + Math.random();
}
}
</script>
</head>
<body>
<p>B.html iframe</p>
<p><input type="button" value="exec main function" onclick="exec_main()"></p>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> exec main function </title>
</head>
<body>
<script type="text/javascript">
parent.parent.fMain(); // execute main function
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> exec iframe function </title>
</head>
<body>
<script type="text/javascript">
parent.window.myframe.fIframe(); // execute parent myframe fIframe function
</script>
</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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
