요구사항 1: 메인 페이지 A에서 iframe B로 데이터를 전송하는 방법은 무엇입니까?
이런 방식으로 메인 페이지는 iframe B에 데이터를 전달해야 하며, iframe B는 데이터를 얻은 후 특정 처리를 수행합니다.
구현 방법
이를 달성하는 비결은 위치 개체의 해시 값을 사용하여 통신 데이터를 전달하는 것입니다. 기본 페이지 A에서 iframe B의 src를 설정하고 그 뒤에 #data 문자열을 추가하면 됩니다(data는 데이터입니다). 통과하려는 경우) 아래 그림과 같이 표시됩니다.
그런 다음 iframe B에서 실제로 일반적으로 사용되는 방법은 다음과 같습니다.
1. iframe B에서 setInterval 메소드를 통해 타이머를 설정하고, location.href의 변경 사항을 모니터링하여 위의 데이터 정보를 얻습니다.
2. 그런 다음 iframe B는 이 데이터 정보를 기반으로 해당 논리적 처리를 수행할 수 있습니다.
요구 사항 2: iframe B는 어떻게 기본 페이지 A에 데이터를 전달합니까?
이런 방식으로 iframe B는 데이터를 메인 페이지로 전달해야 하며, 그러면 메인 페이지는 데이터를 얻은 후 특정 처리를 수행합니다.
구현 방법
구현 비결은 iframe B에 내장되어 있고 메인 페이지 A와 동일한 도메인에 유지되어야 하는 프록시 IframeC를 사용하는 것입니다. 그런 다음 이를 사용하여 위의 첫 번째 통신 방법의 구현 원리를 완전히 활용하여 iframe B의 데이터 iframeC에 대한 다음 질문은 아래 그림과 같이 iframeC가 기본 페이지 A에 데이터를 전달하도록 하는 방법입니다.
iframeC와 메인 페이지가 동일한 도메인에 있기 때문에 이들 사이에서 데이터를 전송하는 것이 훨씬 간단해집니다. 여기서 우리의 방법은 자주 사용되는 속성인 window.top(window.parent.parent를 사용할 수도 있음)을 사용하는 것입니다. 브라우저에 로드된 최상위 창 개체에 대한 참조이므로 메인 페이지 A에서 메서드를 직접 사용할 수 있습니다. 하하하, 간단합니다.
이 시점에서 간단한 분석과 요약을 해보자.
이 구현의 전제이자 가장 큰 단점은 iframe의 콘텐츠를 우리가 제어할 수 있어야 한다는 것입니다. 그러나 최소한 우리의 구현은 브라우저의 보안 규칙을 기반으로 하며 애플리케이션 자체의 보안을 훼손하지 않습니다.
구현 시 고려해야 할 몇 가지 세부 사항
다음과 같은 사용 용이성, 확장성 및 유지 관리성을 고려하십시오.
타사 앱은 우리가 제공하는 다양한 도구를 쉽게 사용하기 위해 우리가 제공하는 JS 시드 파일만 로드하면 됩니다.
위의 다양한 도구를 패키지 형태로 구성하여 온디맨드 로딩을 극대화합니다.
첫 번째 항목의 JS 시드 파일은 기본적인 메소드 구현만 제공하고 적응성이 뛰어난 툴킷과 같이 가장 일반적으로 사용되는 툴킷을 넣습니다.
시드 파일을 통해 우리는 일반적으로 사용되는 일부 JS 툴킷을 타사 앱에 제공하며 지정된 툴킷은 YUI3 모듈과 유사한 동적 로딩 메커니즘을 사용하여 직접 사용할 수 있습니다.
타사 앱 및 메인 페이지에서 전달된 데이터(셀프콜, 로그인 인증, 전달된 데이터 등)를 분류합니다.
전송된 데이터는 특정 사양을 충족하는 JSON 형식을 사용하며 통합 서비스 아웃렛을 통해 전송됩니다. 메인 페이지에서는 사양에 따라 데이터를 구문 분석하고 해당 메서드를 호출할 수 있는 통합 서비스 인터페이스를 제공합니다.
버전 관리 문제도 있습니다. 타사 앱에 대한 영향을 최소화하기 위해 위의 모든 JS 파일 버전은 이전 버전과의 호환성 전략을 채택합니다. 작은 버전은 서버를 사용하여 만료 시간을 설정합니다. 특정 빈도의 SQUID 캐시 주요 버전 업데이트는 사용자의 필요에 따라 수동으로 변경됩니다.
물론 위의 내용이 최적의 솔루션은 아닐 수도 있지만, 도움과 지침을 제공할 수 있기를 바랍니다. 또한 버전 관리 등 일부 구현 방법을 점차 개선하고 있습니다. 또한 해결해야 할 몇 가지 문제도 있습니다. .
특정 코드
메인 페이지 A의 소스 코드
다음과 같이 코드 코드를 복사합니다.
JS 코드
/*메인 페이지 A*/
<!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">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>메인 페이지 A</title>
<스크립트 유형="텍스트/자바스크립트">
함수 초기화(){
document.domain = 'bai.sohu.com';
Alert('나는 메인 프레임이고 타사 애플리케이션 IframeB가 포함되어 있습니다. 애플리케이션이 아래에서 로드되기 시작합니다.');
var iframeTag = document.getElementById('frameB'),
iframeSrc = 'http://test.com/iframePage.html';
iframeTag.src = iframeSrc;
iframeTag.style.display = '차단';
};
함수 콜백(h){
var iframeB = document.getElementById('frameB');
Alert('IframeC는 내(메인 프레임) 인터페이스를 호출하고 IframeB의 높이를 나에게 전달합니다. 구체적인 값은 ' + h);
iframeB.style.height= h + 10 + 'px';
iframeB.src += '#'+ h
};
</script>
</head>
<body onload="init();">
<p>저는 홈페이지 프레임이고 도메인은 bai.sohu.com입니다</p>
<iframe id="frameB" style="display:none;"></iframe>
</body>
</html>
iframeB의 소스 코드(iframePage.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">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframeB</title>
</head>
<body onload="init();">
<p style="height:500px;">저는 타사 애플리케이션이고 내 도메인은 test.com입니다.</p>
<iframe id="frameC" style="height:1px;width:1px;display:none;"></iframe>
</body>
</html>
<스크립트 유형="텍스트/자바스크립트">
함수 초기화(){
Alert('저는 타사 앱입니다. 메인 프레임과 동일한 도메인에 통신 채널 IframeC를 만들고 해당 src를 설정한 다음 # 기호를 사용하여 높이 값을 전달하겠습니다.');
var iframeTag = document.getElementById('frameC'),
iframeSrc = 'http://bai.sohu.com/iframePageC.html#',
pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
iframeTag.src = iframeSrc + pageHeight;
iframeTag.style.display = '차단';
window.setTimeout(함수(){
Alert('메인 페이지는 내(IframeB)의 src를 설정하고 해시(#)를 통해 수신된 높이를 나에게 전달합니다: ' + location.hash);
},2000);
};
</script>
iframeC의 소스 코드(iframePageC.html)
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
document.domain = 'bai.sohu.com';
Alert('나(IframeC)는 매개변수(#)를 통해 나에게 높이 값을 전달하는 iframeB를 받았습니다. 이제 IframeB의 높이를 설정하기 위해 메인 페이지 메소드를 호출합니다.');
top.callback(window.location.href.split('#')[1]);
</script>