iframe 응답성 확보

sourcecode

iframe 응답성 확보

copyscript 2023. 9. 21. 21:12

iframe 응답성 확보

Can You Make a iFrame Response?를 읽고 있었는데 댓글/답변 중 하나가 이 JSFiddle로 연결되었습니다.

하지만 HTML과 CSS를 제 요구에 맞게 구현하려고 했을 때, 저는 같은 결과/성공을 거두지 못했습니다.저는 JSFiddle이 저에게 동일하게 작동하지 않는 방법을 보여드릴 수 있도록 저만의 JSFiddle을 만들었습니다.제가 사용하고 있는 iFrame의 종류와 관련이 있다고 확신합니다(예를 들어, 제품 이미지도 반응성이 있어야 할 수도 있습니까?).

제 주된 관심사는 블로그 독자들이 아이폰으로 블로그를 방문할 때 모든 것이 x 너비(모든 콘텐츠의 경우 100%)가 되지 않도록 하고 iFrame이 잘못된 행동을 하여 더 넓은 유일한 요소가 된다는 것입니다(만약 그게 말이 된다면).

왜 안 되는지 아는 사람?

내 JSFiddle의 HTML & CSS는 다음과 같습니다(링크를 클릭하지 않으시려면).

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #ffffff;
}

.h_iframe {
  position: relative;
}

.h_iframe .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
    <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe>
  </div>
</div>

놀라운 노래하는 고양이 솔루션을 소개합니다 =)

.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/
를 적절히

또는 고유 비율 기법을 사용할 수도 있습니다.

위와 같은 용액(토마토, 토마토)의 대체 옵션일 뿐입니다.

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 */
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

이 코드를 사용하여 응답성을 높입니다.

iframe, object, embed {
    max-width: 100%;
}

데이브 루퍼트 / 크리스 코이어로부터 해결책을 찾았습니다.하지만 스크롤을 사용할 수 있도록 하고 싶어서 다음과 같이 생각해냈습니다.

.myIframe {
  position: relative;
  padding-bottom: 65.25%;
  padding-top: 30px;
  height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /*<<--- THIS IS THE KEY*/ 
  border: solid black 1px;
}

.myIframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="myIframe">
  <iframe> </iframe>
</div>

이 기술은 http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php 사이트에서 사용할 수 있습니다.

그것은 매우 유용하고 이해하기 쉽습니다.당신이 만들기만 하면 되는 것은

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

여기 시연을 위해 편집한 js fiddle이 있습니다.

iFrame은 고유 비율 기법(intrinsic ratio technique)이라는 작은 CSS 기법을 통해 종횡비를 유지하면서도 완벽하게 응답할 수 있습니다.저는 이 질문을 구체적으로 다루는 블로그 포스트를 썼습니다: https://benmarshall.me/responsive-iframes/

이 요지는 다음과 같습니다.

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}


/* 16x9 Aspect Ratio */

.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}


/* 4x3 Aspect Ratio */

.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="intrinsic-container intrinsic-container-16x9">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

BOOM, 완전 대응!

이 솔루션을 확인해 보십시오.저한테 효과가 있습니다.

https://jsfiddle.net/y49jpdns/

<html lang="en" class="no-js">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style>
    html body {
      width: 100%;
      height: 100%;
      padding: 0px;
      margin: 0px;
      overflow: hidden;
      font-family: arial;
      font-size: 10px;
      color: #6e6e6e;
      background-color: #000;
    }
    
    #preview-frame {
      width: 100%;
      background-color: #fff;
    }
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
    var calcHeight = function() {
      $('#preview-frame').height($(window).height());
    }

    $(document).ready(function() {
      calcHeight();
    });

    $(window).resize(function() {
      calcHeight();
    }).load(function() {
      calcHeight();
    });
  </script>
</head>

<body>
  <iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
  </iframe>
</body>

</html>

iframe{
  max-width: 100% !important;
}

프레임이 응답할 수 없는 경우.iframe 컨테이너는 자체 설정된 높이와 너비를 가진 웹 페이지이므로 iframe 컨테이너가 표시되는 콘텐츠는 반응하지 않고 반응하도록 만들 수 있습니다.

예제 피들 링크는 크기가 선언되지 않은 내장된 유튜브 비디오 링크를 표시하기 때문에 작동합니다.

DA 말이 맞습니다.당신 자신의 연주에서, iframe은 정말로 반응합니다.firebug에서 iframe box-sizing다를 할 수 .그러나 if 프레임 내부의 일부 요소는 응답성이 없으므로 창 크기가 작을 때 "눈에 잘 띄지" 않습니다.를 들면,면,div#products-post-wrapper폭은 8800px입니다.

CSS를 사용한 간편함:

iframe{
width: 100%;
max-width: 800px /*this can be anything you wish, to show, as default size*/
}

참고하세요.하지만 그 안의 내용물이 반응하도록 만들지는 못합니다!

두 번째 편집:: 내부 내용에 따라 두 가지 유형의 응답형 iframe이 있습니다.

하나는 iframe의 내부가 비디오 또는 이미지 또는 수직으로 위치된 많은 수를 포함할 때이며, 위의 두 행의 CSS 코드는 거의 완전히 충분하고, 종횡비가 의미를 가질 때...

다른 하나는 다음과 같습니다.

가로 세로 비율이 아니라 스크롤 바가 나타나지 않도록 해야 하는 컨텐츠의 연락처/등록 양식 유형. 컨텐츠가 컨테이너 아래에 flowing.모바일에서는 스크롤 바가 보이지 않고 iframe의 내용이 보일 때까지 스크롤만 하면 됩니다.물론 당신은 그것에 최소한 어떤 종류의height합니다와하여 콘텐츠 하는 수직 에 맞게 합니다. 예를 들어 다음과 같은 미디어 쿼리는 다음과 같습니다.

@media (max-width: 640px){
iframe{
height: 1200px /*whatever you need, to make the scrollbar hide on testing, and the content of the iframe reveal (on mobile/phone or other target devices) */
}
}
@media (max-width: 420px){
iframe{
height: 1600px /*and so on until and as needed */
}
}

저는 레오웨브데브의 게시물이 제 쪽에서 작동하는 것처럼 보인다는 것을 알았지만, 제가 만들고자 하는 사이트의 두 가지 요소인 스크롤과 바닥글을 제거했습니다.

.scrolling="yes"iframe이합니다.

반응성 때문에 자동으로 바닥이 쳐졌는지는 잘 모르겠지만, 다른 사람이 그 답을 알고 있기를 바랍니다.

픽셀에 지정된 iframe 높이 및 너비 제거 및 사용 백분율

iframe{  max-width: 100%;}

<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}

@Connor Cushion Mulhall에서 코드를 조정하여 해결했습니다.

iframe, object, embed {
  width: 100%;
  display: block !important;
}

부트스트랩 CSS 라이브러리를 사용하는 경우 해당 라이브러리에서 제공하는 응답형 임베디드 클래스를 사용할 수 있습니다.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

여러 가지 다른 종횡비가 지원됩니다. 설명서를 참조하십시오.

다음 마크업을 사용합니다.

<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>

다음 CSS는 비디오를 전폭, 16:9로 만듭니다.

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}

나는 이 주제에 대해 더 알아보고 있고 마침내 좋은 답을 얻었습니다.다음과 같이 시도할 수 있습니다.

.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}

<div class="wrapper">
  <div class="container">
    <iframe src="there is path of your iframe"></iframe>
   </div>
</div>

iframe을 모든 장치 화면에 맞게 반응할 수 있는 최적의 솔루션은 다음과 같은 코드를 적용하기만 하면 됩니다(게임 사이트에서 잘 작동).

iframe::-webkit-scrollbar{display:none}
.iframe{background:#fff;overflow:hidden}
.iframe iframe{width:100%;height:540px;border:0;display:block}
.iframe-content{position:absolute;width:100%;height:540px;overflow:auto;top:0;bottom:0;-webkit-overflow-scrolling:touch}

@media screen and (max-width:992px){.iframe iframe{height:720px}}
@media screen and (max-width:768px){.iframe iframe{height:720px}}
@media screen and (max-width:720px){.iframe iframe{height:720px}}
@media screen and (max-width:479px){.iframe iframe{height:480px}}
@media screen and (max-height:400px){.iframe iframe{height:360px}}

모든 장치에 맞는 반응형 게임 컨테이너를 찾고 있다면 고급 CSS @media 쿼리를 사용하는 이 코드를 적용합니다.

가로 세로 비율을 알 수 없고 iFrame의 내용이 완전하게 응답하는 상황을 위한 완전 응답 iFrame.

위의 솔루션들 중 어떤 것도 제 요구에 부응하지 못했는데, 그것은 그 안에 완전한 응답성을 갖춘 동적 컨텐츠를 포함하는 완전한 응답성을 갖춘 iFrame을 만드는 것이었습니다.어떤 종류의 종횡비를 유지하는 것은 선택 사항이 아니었습니다.

탐색 막대의 높이와 iFrame 위 또는 아래의 모든 컨텐츠를 얻을 수 있습니다.제 경우에는 상단 navbar만 빼면 되고 iFrame이 화면 하단까지 채워지기를 원했습니다.

코드:

function getWindowHeight() {
        console.log('Get Window Height Called')
        var currentWindowHeight = $(window).height()

        var iFrame = document.getElementById("myframe")
        var frameHeight = currentWindowHeight - 95

        iFrame.height = frameHeight; 

    }
//Timeout to prevent function from repeatedly firing
    var doit;
    window.onresize = function(){
      clearTimeout(doit);
      doit = setTimeout(resizedw, 100);
    };

또한 기능 크기를 조정할 때 백만 번 호출되지 않도록 타임아웃을 만들었습니다.

아래 코드는 응답하지 않는 웹 사이트의 고정 너비 콘텐츠를 뷰포트 너비보다 큰 경우에만 뷰포트 너비에 대한 아이프레임 크기로 만듭니다.데모 목적으로 웹 사이트는 800픽셀 너비의 단일 이미지입니다.브라우저 창 크기를 조정하여 테스트하거나 전화기에 페이지를 로드할 수 있습니다.

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
iframe {width: 100%; transform-origin: left top;}
.imgbox{text-align:center;display:block;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>   
<script>
jQuery(document).ready(function($){
    nsZoomZoom(); 
    $(window).resize(function(){ 
        nsZoomZoom();
    });
    function nsZoomZoom(){
        htmlWidth = $('html').innerWidth();
        iframeWidth = 800;
        if (htmlWidth > iframeWidth)
            scale = 1;
        else {
            scale = htmlWidth / (iframeWidth); 
        }
        $("iframe").css('transform', 'scale(' + scale + ')');
        $("iframe").css('width', '800');
    } 
}); 
</script>
</head>
<body>
<div class=imgbox>
    <iframe src="http://placekitten.com/g/800/600" scrolling=no width=800 height=600 frameborder=no></iframe>
</div>
</body>

부트스트랩 4를 사용하는 경우 내장에 유틸리티 클래스를 사용합니다.

https://getbootstrap.com/docs/4.5/utilities/embed/

예:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Xh3j915ZnCo?rel=0" allowfullscreen></iframe>
</div>

예:

<div class="intrinsic-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

CSS

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

사각형으로 틀을 보여줘야 해서 제가 사용한 것입니다.

.video-wrapper {
  position: relative;
  padding-bottom: 100%;
}
.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}

이 전체 코드를 확인해 보세요.아래 코드와 같은 백분율로 용기를 사용할 수 있습니다.

<html>
<head>
<title>How to make Iframe Responsive</title>
<style>
html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src=""/>
<iframe src="http://www.sanwebcorner.com" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
</body>
</html>

언급URL : https://stackoverflow.com/questions/17838607/making-an-iframe-responsive

'sourcecode' 카테고리의 다른 글

console.log javascript [Function] (0)	2023.09.21
mysql의 테이블이 3개인 내부 조인 (0)	2023.09.21
목록 맨 앞에 jquery를 추가합니다. (0)	2023.09.21
재료 아이콘을 오프라인으로 호스팅하는 방법은? (0)	2023.09.21
table_y에 의해 실행되는 트리거를 사용하여 table_x의 모든 엔트리를 삭제하는 방법 (0)	2023.09.21

현재글iframe 응답성 확보

각종 프로그래밍 정보를 다루는 블로그입니다.

JSON, vuejs2, WordPress, oracle, Git, reactjs, C, mongoDB, MariaDB, php, JavaScript, Ajax, Spring-Boot, vuex, Java, MySQL, jquery, Powershell, angularjs, Python,

Today :
Yesterday :

copyscript

iframe 응답성 확보

iframe 응답성 확보

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

티스토리툴바

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

iframe 응답성 확보

iframe 응답성 확보

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

관련글

티스토리툴바