[javascript] 콘텐츠를 기반으로 iframe 크기 조정



Answers

다른 도메인의 iframe 콘텐츠를 처리 할 필요가없는 경우이 코드를 사용해보십시오. 문제가 완전히 해결되고 간단합니다.

<script language="JavaScript">
<!--
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>

<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>
Question

iGoogle과 유사한 응용 프로그램을 만들고 있습니다. iframe을 사용하여 다른 도메인의 다른 애플리케이션의 콘텐츠가 표시됩니다.

iframe의 콘텐츠 높이에 맞게 iframe의 크기를 조정하려면 어떻게해야합니까?

나는 구글이 사용하는 자바 스크립트를 해독하려했지만, 난독 화되었고 웹 검색은 지금까지 아무런 성과가 없었다.

업데이트 : 콘텐츠가 다른 도메인에서로드되어 동일한 출처 정책이 적용됩니다.




다른 답변은 모두 나이가 들어서 조금 늦을 수 있습니다 :-)하지만 ... 여기 내 해결책입니다. 실제 FF, Chrome 및 Safari 5.0에서 테스트되었습니다.

CSS :

iframe {border:0; overflow:hidden;}

자바 스크립트 :

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

희망이 사람을 도울 것입니다.




jQuery를 사용하는 가장 간단한 방법은 다음과 같습니다.

$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
    $(this).css("height", $(this).contents().height() + "px");
});



다음은 iframe의 src 특성을 통해 json에 정보를 추가하는 jQuery 접근 방식입니다. 여기 데모, 크기 조정 및이 창을 스크롤 .. json 함께 결과 URL을 ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHeight:1019,scrollHeight:571}#

다음은 소스 코드입니다. http://jsfiddle.net/zippyskippy/RJN3G/

function updateLocation(){

    var loc = window.location.href;
    window.location.href = loc.replace(/#{.*}#/,"") 
        + "#{docHeight:"+$(document).height() 
        + ",windowHeight:"+$(window).height()
        + ",scrollHeight:"+$(window).scrollTop()
        +"}#";

};

//setInterval(updateLocation,500);

$(window).resize(updateLocation);
$(window).scroll(updateLocation);



마지막으로 window.postMessage(message, targetOrigin); 사용하여 iframe에서 상위 웹 사이트로 데이터를 보내는 다른 솔루션을 발견했습니다 window.postMessage(message, targetOrigin); . 여기서 나는 어떻게했는지 설명한다.

사이트 A = http://foo.com 사이트 B = http://bar.com

SiteB가 siteA 웹 사이트에로드 중입니다.

SiteB 웹 사이트에이 줄이 있습니다.

window.parent.postMessage("Hello From IFrame", "*"); 

또는

window.parent.postMessage("Hello From IFrame", "http://foo.com");

다음 siteA이 다음 코드가 있습니다.

// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];


var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
   alert(e.data);
   // Do whatever you want to do with the data got from IFrame in Parent form.
}, false); 

보안 연결을 추가하려는 경우 eventer(messageEvent, function (e) {}) 조건이 충족되면 이것을 사용할 수 있습니다.

if (e.origin == 'http://iframe.example.com') {
    alert(e.data); 
    // Do whatever you want to do with the data got from IFrame in Parent form.
}

IE의 경우

내부 IFrame :

 window.parent.postMessage('{"key":"value"}','*');

외부:

 eventer(messageEvent, function (e) {
   var data = jQuery.parseJSON(e.data);
   doSomething(data.key);
 }, false);



나는 document.domain 설정에 기반한 솔루션을 대체하기 위해 ConroyP의 프레임 - 인 - 프레임 솔루션을 구현하고 있지만 iframe의 내용 높이를 다른 브라우저에서 정확하게 결정하는 것이 어렵다는 것을 발견했다. (FF11, Ch17 및 IE9로 테스트하기 ).

ConroyP는 다음을 사용합니다.

var height = document.body.scrollHeight;

하지만 초기 페이지로드에서만 작동합니다. 내 iframe에는 동적 콘텐츠가 있고 특정 이벤트에서 iframe의 크기를 조정해야합니다.

내가 한 일은 다른 브라우저에 대해 다른 JS 속성을 사용하는 것이 었습니다.

function getDim () {
    var body = document.body,
        html = document.documentElement;

    var bc = body.clientHeight;
    var bo = body.offsetHeight;
    var bs = body.scrollHeight;
    var hc = html.clientHeight;
    var ho = html.offsetHeight;
    var hs = html.scrollHeight;

    var h = Math.max(bc, bo, bs, hc, hs, ho);

    var bd = getBrowserData();

    // Select height property to use depending on browser
    if (bd.isGecko) {
        // FF 11
        h = hc;
    } else if (bd.isChrome) {
        // CH 17
        h = hc;
    } else if (bd.isIE) {
        // IE 9
        h = bs;
    }

    return h;
}

getBrowserData ()는 Ext Core의 http://docs.sencha.com/core/source/Ext.html#method-Ext-apply 의해 영감을받은 브라우저 감지 기능입니다.

FF와 IE에서는 효과가 있었지만 Chrome에는 문제가있었습니다. 그 중 하나는 타이밍 문제 였고, 분명히 iframe의 높이를 설정 / 감지하는 데 Chrome이 필요했습니다. 또한 iframe이 콘텐츠보다 높으면 Chrome은 iframe의 콘텐츠 높이를 올바르게 반환하지 않았습니다. 높이가 줄어들면 동적 콘텐츠에는 작동하지 않습니다.

이 문제를 해결하기 위해 항상 콘텐츠의 높이를 감지하고 iframe 높이를 올바른 값으로 설정하기 전에 iframe의 높이를 낮게 설정했습니다.

function resize () {
    // Reset the iframes height to a low value.
    // Otherwise Chrome won't detect the content height of the iframe.
    setIframeHeight(150);

    // Delay getting the dimensions because Chrome needs
    // a few moments to get the correct height.
    setTimeout("getDimAndResize()", 100);
}

코드가 최적화되지 않았습니다, 내 devel 테스트에서 :)

희망이 누군가가 도움이 발견!




로드시 jquery 작업 (크로스 브라우저) :

 <iframe src="your_url" marginwidth="0"  marginheight="0" scrolling="No" frameborder="0"  hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%"  width="100%"></iframe>

function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
 }  

반응 형 페이지에서 크기 변경시 :

$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
 $('#frame').css("height", heightFrame);
}
});



iGoogle 가젯은 크기 조정을 적극적으로 구현해야하기 때문에 원격 도메인이 어떤 방식 으로든 참여하지 않으면이를 수행 할 수없는 크로스 도메인 모델에 맞춰집니다. 콘텐츠가 일반적인 도메인 간 통신 기술을 사용하여 컨테이너 페이지에 새 크기의 메시지를 보낼 수 있다면 나머지는 간단합니다.




나는 쉬운 솔루션을 가지고 있으며 링크의 폭과 높이를 결정해야한다. (대부분의 브라우저에서 작동한다.)

<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>



이는 iframe 페이지가로드 된 시점을 알아야하기 때문에 약간 까다 롭습니다. 콘텐츠를 관리하지 않으면 어려울 수 있습니다. iframe에 onload 핸들러를 추가 할 수는 있지만, 과거에 이것을 시도해 보았습니다. 브라우저 간에는 매우 다른 동작이 있습니다 (가장 성가신 사람은 아님). 아마도 크기를 조정하고 이벤트로드 또는 이벤트 크기 조정을 청취하는 컨텐츠에 스크립트를 삽입하는 함수를 iframe 페이지에 추가해야합니다. 그러면 이전 함수가 호출됩니다. 페이지의 기능을 추가하려고합니다. 보안을 확실히하고 싶기는하지만, 그렇게하기가 쉽지 않을 것입니다.




Links