도메인 간 값 전송이란 메인 페이지와 iframe_javascript 기술 간의 값 전송을 의미합니다.
- WBOY원래의
- 2016-05-16 17:10:031219검색
요구 사항 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 Seed 파일은 우리가 제공하는 다양한 도구와 함께 쉽게 사용할 수 있습니다
위의 다양한 도구는 온디맨드 로딩을 극대화하기 위해 패키지 형태로 구성되어 있습니다
첫 번째 기사의 JS Seed 파일은 단지 제공합니다 기본 메소드 구현, 적응력이 뛰어난 등 가장 일반적으로 사용되는 툴킷을 넣습니다.
시드 파일을 통해 일반적으로 사용되는 일부 JS 툴킷을 타사 앱에 제공하며 직접 사용은 YUI3과 유사합니다. 동적 로딩 모듈의 메커니즘은 지정된 툴킷
을 사용하여 타사 앱과 메인 페이지에서 전달된 데이터(자체 호출, 로그인 확인, 데이터 전송 등)를 분류할 수 있습니다.
전달된 데이터는 데이터를 사용합니다. 특정 사양을 충족하여 통합 서비스 아웃렛을 통해 전송됩니다. 메인 페이지에서는 사양에 따라 데이터를 구문 분석하고 해당 메서드를 호출할 수 있는 통합 서비스 인터페이스를 제공합니다
또한 버전 관리 문제도 있습니다. 타사 앱에 미치는 영향을 최소화하기 위해 위의 모든 JS 파일 버전은 이전 버전과의 호환성 전략을 채택합니다. 작은 버전은 서버를 사용하여 특정 빈도로 SQUID 캐시의 만료 시간을 설정하는 방식으로 구현됩니다. 대규모 버전 업데이트는 사용자의 필요에 따라 수동으로 변경됩니다.
물론 위의 방법이 최선의 해결책이 아닐 수도 있습니다. 다만 몇 가지 도움과 안내를 드리고자 합니다. 또한 일부 구현 방법도 점차 개선하고 있습니다. 버전 관리 등 해결해야 할 문제도 있습니다.
특정 코드
메인 페이지 A의 소스 코드
Js コード
/*メイン ページ A*/
メイン ページ A type="text/javascript">
function init(){
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 の高さを渡します。具体的な値は次のとおりです:
iframeB.style.height= h 10 'px'; 🎜>iframeB.src = '#' h
}
iframeB (iframePage.html) のソースコード
コピーcode
iframeB ;/head>
이런 방식으로 메인 페이지에서는 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 Seed 파일은 우리가 제공하는 다양한 도구와 함께 쉽게 사용할 수 있습니다
위의 다양한 도구는 온디맨드 로딩을 극대화하기 위해 패키지 형태로 구성되어 있습니다
첫 번째 기사의 JS Seed 파일은 단지 제공합니다 기본 메소드 구현, 적응력이 뛰어난 등 가장 일반적으로 사용되는 툴킷을 넣습니다.
시드 파일을 통해 일반적으로 사용되는 일부 JS 툴킷을 타사 앱에 제공하며 직접 사용은 YUI3과 유사합니다. 동적 로딩 모듈의 메커니즘은 지정된 툴킷
을 사용하여 타사 앱과 메인 페이지에서 전달된 데이터(자체 호출, 로그인 확인, 데이터 전송 등)를 분류할 수 있습니다.
전달된 데이터는 데이터를 사용합니다. 특정 사양을 충족하여 통합 서비스 아웃렛을 통해 전송됩니다. 메인 페이지에서는 사양에 따라 데이터를 구문 분석하고 해당 메서드를 호출할 수 있는 통합 서비스 인터페이스를 제공합니다
또한 버전 관리 문제도 있습니다. 타사 앱에 미치는 영향을 최소화하기 위해 위의 모든 JS 파일 버전은 이전 버전과의 호환성 전략을 채택합니다. 작은 버전은 서버를 사용하여 특정 빈도로 SQUID 캐시의 만료 시간을 설정하는 방식으로 구현됩니다. 대규모 버전 업데이트는 사용자의 필요에 따라 수동으로 변경됩니다.
물론 위의 방법이 최선의 해결책이 아닐 수도 있습니다. 다만 몇 가지 도움과 안내를 드리고자 합니다. 또한 일부 구현 방법도 점차 개선하고 있습니다. 버전 관리 등 해결해야 할 문제도 있습니다.
특정 코드
메인 페이지 A의 소스 코드
코드 복사 코드는 다음과 같습니다.
Js コード
/*メイン ページ A*/
function init(){
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 の高さを渡します。具体的な値は次のとおりです:
iframeB.style.height= h 10 'px'; 🎜>iframeB.src = '#' h
}
i 私のドメインは bai.sohu.com
iframeB (iframePage.html) のソースコード
私のドメインは次のとおりです。 .com