javascript 크로스 도 메 인 통신 (1): location. hash 를 이용 하여 크로스 도 메 인 iframe 적응 실현

페이지 영역 관계: a. html 소속 도 메 인 A: www. A. comb. html 소속 도 메 인 B: www. B. com
문제 의 본질:
js 크로스 필드 iframe 에 대한 접근 문 제 는 a. html 에서 iframe 의 높이 와 너 비 를 제어 하려 면 먼저 b. html 의 크기 를 읽 어야 하기 때 문 입 니 다. A, B 는 같은 도 메 인 에 속 하지 않 습 니 다. 브 라 우 저 는 안전성 을 고려 하여 js 크로스 도 메 인 접근 이 제한 되 어 b. html 의 높이 와 너 비 를 읽 지 못 합 니 다.
해결 방안:
프 록 시 페이지 c. html 와 a. html 가 속 한 같은 도 메 인 A 를 도입 합 니 다. c. html 는 A 도 메 인 에서 제공 하 는 좋 은 중간 프 록 시 페이지 입 니 다. c. html 의 주 소 를 가정 합 니 다. www. A. com / c. html 는 location. hash 안의 width 와 height 의 값 을 읽 고 같은 도 메 인 아래 a. html 의 iframe 의 너비 와 높이 를 설정 합 니 다.
코드 는 다음 과 같 습 니 다: a. html 코드 우선 a. html 에서 iframe 을 통 해 b. html 를 도입 하 였 습 니 다. 

 
 
 
 
  
<iframe id=”b_iframe” height=”0″ width=”0″ src=”http://www.B.com/b.html” frameborder=”no” border=”0px” marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes” ></iframe> 
  
　　 
b. html 코드  

 
 
 
 
  
<script type=”text/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.jb51.net/c.html#width|height”
} 
</script> 
  
<iframe id=”c_iframe” height=”0″ width=”0″ src=”http://www.A.com/c.html” style=“display：none” ></iframe> 
<!–js  b.html    ,            a.html             c.html src hash  –> 
  
c. html 코드  

 
 
 
 
  
<script type=”text/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; 
</script> 
  
a. html 의 iframe 은 b. html 의 너비 와 높이 에 적응 할 수 있 습 니 다.