1. 홈
  2. 질의 응답
  3. 설정 자동 높이가 iframe을

설정 자동 높이가 iframe을

2012-11-04 7 views

답변

1

스크롤 막대없이 PDF를 표시하려면 URL에 매개 변수를 전달하면됩니다. http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf

이 시도 : Adobe는이 여기에 문서화

<iframe src="pdf/sample.pdf#view=fit"></iframe>

당신은 정확하게 PDF에 맞게은 iframe의 높이를 설정되지 않습니다, 그러나 그것은 반드시 브라우저이기 때문에 아마도 가장 강력한 솔루션입니다 독립적이고 JavaScript가 필요하지 않습니다.

다음은 Daniel의 코멘트 후 업데이트입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled Page</title> 
</head> 
<body> 
    <iframe src="http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf#view=fit&toolbar=0&navpanes=0" 
     width="300px" height="400px"></iframe> 
</body> 
</html>

이는 크롬에 보이는 방법은 다음과 같습니다 :

enter image description here

이 예상대로 다음과 같이

나는 테스트 HTML을 만들었습니다.

또한 도구 모음과 navpane을 해제하여 페이지의 여유 공간을 확보했습니다.

출처

2012-11-05 07:58:45

+2

시도했지만 작동하지 않습니다. –

+0

@Daniel 업데이트를 참조하십시오. –

+1

네,하지만 높이를 400으로 설정 했으므로 PDF가 스크롤바가없는 iframe에 표시되기를 바랍니다. 그래서 pdf를 볼 때 브라우저 스크롤바로 아래로 스크롤해야합니다. 이제 내가 무슨 뜻인지 알 겠어? –

0

당신은 단순히 내 페이스 북의 게시물에 설명 한 방법

https://www.facebook.com/antimatterstudios/posts/10151007211674364 당신이 자동으로 다른 웹 사이트에서 페이지를 호스팅하고 있기 때문에의 높이를 설정하려는 IFrame을을해야합니까를 사용하여 작업을 수행 할 수 있습니다 너 안에있어.

글쎄, 불행히도 IFrame은로드하는 콘텐츠의 높이를 취할 수 없으며 높이를 지정하지 않으면 기본 높이 또는 전혀 높이가 표시되지 않습니다. 이것은 성가신 일입니다.

나는 해결책을 찾았지만 최근의 표준 지원 브라우저에서만 작동 할뿐 아니라 IE8에서도 작동하므로 약 99 %는 완벽합니다.

유일하게 문제는 iframe 안에 자바 스크립트를 삽입해야합니다. iframe은로드하는 콘텐츠가 당신에게 속한 경우 쉽습니다.로드중인 콘텐츠를 열고 자바 스크립트를 콘텐츠에 넣을 수 있습니다.

웹 사이트에서

, 당신은 아마 그것으로 괜찮아요, 맨 아래에이를 추가, 당신의 iframe 내용이

jQuery(document).ready(function(){ 
    jQuery(window).bind("message",function(e){ 
     data = e.data || e.originalEvent.data; 
     jQuery("iframe.newsletter_view").height(data.height); 
    }); 
});

같은 "IFrame을에서 메시지를받을 '수 자바 스크립트의 조각을, 필요 단지 같은 것을 할 "$ 템플릿을. 자바 스크립트를 $"PHP 또는 무언가를 사용하여 자바 스크립트 내가 jQuery를 사용하고있는 태그 분명히

<script type="text/javascript" src="jquery-1.7.1-min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    parent.postMessage({ 
     height:$(document.body).height()+50+"px" 
    },"*"); 
}); 
</script>

내부에없는 경우에도, 당신은 그냥 쉽게, 필요 없다 아마도 당신은 그것을 사용하므로 번거 로움을 덜어줍니다.

당신은 iframe을로드, 그것은 내용 :

의 길이에 따라 iframe이 크기가 조정됩니다 부모 창에 다시 신호를 보내드립니다 때, 나는 당신이 할 수있는 확신 그렇게 할 경우 작은 것들을 변경하는 방법을 알아 내,하지만 내가 사용하고있는 방법은 그게 전부다.

출처

2012-12-30 19:46:27

+0

양자 택일로, 당신은 내용을 열고 iframe에 표시하고 싶은 내용의 맨 아래에 자바 스크립트를 지나치게 할 수 있습니다. 나는 그 대답을 다시 읽은 후에 분명히해야합니다. –

관련 문제

 관련 문제