iframe 적응 형 크기

도메인 A.html은 메인 페이지 A : www.taobao.com에 속합니다.

Iframed Page B.html이 속한 도메인 B : www.alimama.com, 주소를 가정합니다 : http://www.alimama.com/b.html

A 도메인 이름 A.html 아래의 페이지는 Iframe을 통해 B 도메인 이름 B의 B.html 페이지에 포함됩니다. B.html의 너비와 높이는 예측할 수없고 변경되므로 A.html에서 iframe의 적응 형 크기가 필요합니다.

JS의 크로스 도메인 iframe 액세스 문제는 A.HTML에서 iframe의 높이와 너비를 제어하기 때문에 먼저 B.html의 크기를 읽어야합니다. A와 B는 동일한 도메인에 속하지 않습니다. 보안상의 이유로 브라우저는 JS에 대한 크로스 도메인 액세스를 제한하며 B.html의 높이와 너비를 읽을 수 없습니다.

프록시 프록시 페이지 C.HTML은 동일한 도메인 A 및 A.HTML에 속합니다. C.html은 A 도메인 a에 제공되는 중간 프록시 페이지입니다. c.html의 주소가 www.taobao.com/c.html이라고 가정합니다. 위치에서 너비와 높이 값을 읽은 다음 동일한 영역에서 A.html에서 iframe의 너비와 높이를 설정합니다.

A.html 코드

먼저, B.html은 a.html의 iframe을 통해 소개되었습니다

<iframe id = b_iframe height = 0 'resth = 0'src = http : //www.alimama.com/b.html frameborder = no border = 0px marginwidth = 0 ′ marginheight = 0 ′ scrolling = no allowtransparency = 예> </iframe>

B.html 코드

<스크립트 유형 = 텍스트/JavaScript>

var b_width = math.max (document.documentElement.clientWidth, document.body.clientWidth);

var b_height = math.max (document.documentElement.clientHeight, document.body.clientHeight);

var c_iframe = document.getElementById (c_iframe);

c_iframe.src = c_iframe.src+#+b_width+|+b_height; //http://www.taobao.com/c.html#width| height

}

</스크립트>

<!-js는 B.html의 너비와 높이를 읽고 동일한 도메인에서 C.HTML의 중간 프록시 페이지로 읽기 너비와 높이를 설정하고 읽기의 너비와 높이를 C.HTML-의 SRC의 해시로 설정합니다.

<iframe id = c_iframe height = 0 '너비 = 0'src = http : //www.taobao.com/c.html style = display : none> </iframe>

c.html 코드

<스크립트 유형 = 텍스트/JavaScript>

var b_iframe = parent.parent.document.getElementById (b_iframe);

var hash_url = window.location.hash;

var hash_width = hash_url.split (#) [1] .split (|) [0]+px;

var hash_height = hash_url.split (#) [1] .split (|) [1]+px;

b_iframe.style.width = hash_width;

b_iframe.style.height = hash_height;

</스크립트>

a.html의 iframe은 B.html의 너비와 높이에 적응할 수 있습니다.

JS와 유사한 다른 크로스 도메인 운영 문제는이 아이디어에 따라 해결할 수 있습니다.