1. 홈
  2. 질의 응답
  3. 자동 크기 조정 iFrame

자동 크기 조정 iFrame

2012-11-01 9 views
1

마침내 iframe에 대한 교차 도메인 기능이 작동했습니다. 지금 가지고있는 문제는 첫 페이지가 꽤 길다는 것입니다. 작은 페이지로 iframe 내의 링크를 클릭하면 iframe의 크기가 자동으로 조정되지 않고 이전 페이지 높이가 가장 아래쪽에 큰 간격이 생깁니다.자동 크기 조정 iFrame

<!DOCTYPE html> 
<head> 
</head> 
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');"> 
<h3>Got post?</h3> 
<p>Lots of stuff here which will be inside the iframe.</p> 
</body> 
</html>

코드 iframe을 표시 할 수있는 주요 도메인에 간다 : 외부 도메인에 간다

코드 :

내가 사용하는 코드는 다음과

<script type="text/javascript"> 
    function resizeCrossDomainIframe(id, other_domain) { 
    var iframe = document.getElementById(id); 
    window.addEventListener('message', function(event) { 
     if (event.origin !== other_domain) return; // only accept messages from the specified domain 
     if (isNaN(event.data)) return; // only accept something which can be parsed as a number 
     var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar 
     iframe.height = height + "px"; 
    }, false); 
    } 
</script> 

<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">

는 사람이 어떻게를 수정하는 어떤 아이디어를 가지고 있고, 않음 경우 내가 수정해야 할 것을 보여줄 수 있습니까?

감사합니다.

출처

2012-11-01 Anonymous

답변

0

먼저 무엇이 iframe을 사용하는지 스스로에게 물어봐야합니다. 이것을 다른 방식 (AJAX!)으로 수행 할 수 있다면, 아마도 가장 좋습니다. 그러나, 나는이 성공을 본 적이있는 유일한 방법 :

__________________ 
|A    | 
| ____________ | 
| |B   | | 
| |   | | 
| | |C|  | | 
| |___________| | 
|_________________|

는 이제 A가 http://foo.com의 URL을 가지고 있으며, B는 http://bar.com의 URL을 가지고 있다고 가정 해 봅시다. B의 스크립트는 A에 영향을 줄 수 없습니다. A의 스크립트는 B의 페이지에 영향을 줄 수 없습니다. 이것은 브라우저 보안 프로토콜입니다.

A가 B에 할 수있는 유일한 작업은 src에 영향을 주어 iframe의 페이지를 효과적으로 변경하는 것입니다. 우리는 이것을 우리의 장점으로 사용할 수 있습니다.

B. 안에 새로운 iframe (C)을 만듭니다. C는 A와 동일한 서버에서 제공되어야하므로 http://foo.com/iframeheight.html이라는 URL을 지정하겠습니다. (iframe이 페이지의 </body> 전) iframe이 B의 하단이 넣어 : A와 C가 동일한 URL을 가지고 있기 때문에, 브라우저가 그들에게 서로 영향을 미칠 수

ifrm = document.createElement("IFRAME"); 
ifrm.setAttribute("src", "http://foo.com/iframeheight.html#" + document.documentElement.scrollHeight); 
ifrm.style.width = 0+"px"; 
ifrm.style.height = 0+"px"; 
document.body.appendChild(ifrm);

.

window.top.getElementById('my_iframe').height = window.location.hash.substring(1);

출처

2012-11-01 14:41:41

+0

나는 편집하고 모든 나의 생각을 똑바로 얻으 려합니다 ... –

+0

그 도움이 전혀 없었습니까? –

+0

예 ... 기본적으로 기본 페이지 (A)와 동일한 URL로 B의 크기가 포함 된 일종의 해시/매개 변수가있는 iframe (B) 내부에 iframe (C)을 만들고 스크립트 C에서 A에게 어떤 크기 B가 필요한지 알려줍니다. –

관련 문제

 관련 문제