페이지 도메인 관계 :
메인 페이지 a.html은 도메인 A: www.taobao.com에 속합니다.
iframe된 페이지 b.html은 도메인 B: www.alimama.com에 속하며 주소는 http://www.alimama.com/b.html이라고 가정합니다.
실현효과 :
A 도메인 이름의 a.html 페이지는 iframe을 통해 B 도메인 이름의 b.html 페이지에 삽입됩니다. b.html의 너비와 높이는 예측할 수 없고 변경될 수 있으므로 a.html의 iframe은 다음과 같습니다. 적응적으로 크기가 조정됩니다.
문제의 성격:
Node.js는 a.html에서 iframe의 높이와 너비를 제어하려면 먼저 b.html의 크기를 읽어야 하기 때문에 교차 도메인 iframe 액세스에 문제가 있습니다. 보안상의 이유로 브라우저는 js의 크로스 도메인 액세스를 제한하고 b.html의 높이와 너비를 읽을 수 없도록 합니다.
해결책:
프록시 페이지 소개 c.html과 a.html은 동일한 도메인 A에 속합니다. c.html은 도메인 A에서 제공되는 우수한 중간 프록시 페이지입니다. c.html의 주소는 www.taobao.com/c.html이라고 가정합니다. , Location.hash에서 너비와 높이 값 가져오기를 담당한 다음 동일한 도메인의 a.html에서 iframe의 너비와 높이를 설정합니다.
코드는 다음과 같습니다:
a.html 코드
먼저 a.html에서 iframe을 통해 b.html이 도입되었습니다.
<iframe id=”b_iframe” 높이=”0″ 너비=”0″ src=”http://www.alimama.com/b.html”frameborder=”no” border=”0px” marginwidth=”0″ marginheight =”0″ 스크롤링=”아니요” 허용투명성=”예” ></iframe>
b.html 코드
<스크립트 유형="텍스트/자바스크립트">
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”
}
</script>
<!–js는 b.html의 너비와 높이를 읽고, 읽은 너비와 높이를 a.html과 동일한 도메인에 있는 중간 프록시 페이지 c.html의 src 해시로 설정합니다.
<iframe id=”c_iframe” 높이=”0″ 너비=”0″ src=”http://www.taobao.com/c.html” style=”display:none” ></iframe>
c.html 코드
<스크립트 유형="텍스트/자바스크립트">
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;
</script>
a.html의 iframe은 b.html의 너비와 높이에 맞게 조정될 수 있습니다.
다른 유사한 js 도메인 간 작업 문제도 이 아이디어에 따라 해결될 수 있습니다.