ทำให้การตอบสนอง iframe

144

ฉันกำลังอ่านโพสต์สแต็คโอเวอร์โฟลว์ชื่อ "คุณสามารถสร้างการตอบสนองของ iFrame ได้หรือไม่" และหนึ่งในความเห็น / คำตอบหนึ่งทำให้ฉันได้jfiddle นี้

แต่เมื่อฉันพยายามใช้ HTML และ CSS เพื่อให้เหมาะกับความต้องการของฉันฉันก็ไม่ได้มีผลลัพธ์ / ความสำเร็จเหมือนกัน ฉันสร้างซอ fiddle ของฉันเองเพื่อให้ฉันสามารถแสดงให้คุณเห็นว่ามันไม่ทำงานเหมือนกันสำหรับฉัน ฉันแน่ใจว่ามีบางอย่างเกี่ยวกับประเภทของ iFrame ที่ฉันใช้ (เช่นรูปภาพของผลิตภัณฑ์อาจต้องตอบสนองด้วยหรือบางสิ่ง)

ข้อกังวลหลักของฉันคือเมื่อผู้อ่านบล็อกของฉันเยี่ยมชมบล็อกบน iPhone ของพวกเขาฉันไม่ต้องการให้ทุกอย่างมีความกว้าง x (100% สำหรับเนื้อหาทั้งหมดของฉัน) จากนั้น iFrame ทำงานผิดพลาดและเป็นองค์ประกอบเดียวที่กว้างขึ้น เอาเนื้อหาอื่น ๆ ที่ผ่านมาทั้งหมดออกไป - ถ้ามันเข้าท่า?)

อย่างไรก็ตามมีใครรู้บ้างว่าทำไมมันไม่ทำงาน ขอบคุณ.

นี่คือ HTML & CSS ของ MY JSFIDDLE (หากคุณไม่ต้องการคลิกที่ลิงค์):

<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>

และนี่คือ 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%;
}
css  iframe  responsive-design 
— ไบรตัน
แหล่งที่มา
6
iframe นั้นเอง ('กล่อง') สามารถตอบสนองได้ แต่ทุกอย่างภายใน iframe เป็นหน้าแยกต่างหากดังนั้นจึงไม่ได้อยู่ในโดเมนของ CSS หรือ JS ของคุณ
— ดา
คุณสามารถใช้ easyXDM เพื่อการสื่อสารระหว่างเพจที่ฝังตัว i-frame และเอกสารบนเซิร์ฟเวอร์ที่ iframe ชี้ไป
— john Smith
1
ฉันชอบ CSS บริสุทธิ์: stackoverflow.com/a/26194041/274502
— cregox

คำตอบ:

107

ฉันนำเสนอวิธีแก้ปัญหาการร้องเพลงอย่างไม่น่าเชื่อ =)

.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 เพื่อปรับขนาดแบบตอบสนอง

หรือคุณอาจใช้เทคนิคอัตราส่วนภายใน - นี่เป็นเพียงตัวเลือกทางเลือกของวิธีแก้ปัญหาเดียวกันด้านบน (มะเขือเทศมะเขือเทศ)

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

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
— โอมาร์
แหล่งที่มา
4
ดูบทความนี้อธิบายเทคนิคนี้ในรายละเอียดเพิ่มเติมได้ที่: smashingmagazine.com/2014/02/..
— Thomas Tempelmann
ใช้งานได้กับ youtube iframes เท่านั้น ดูสิ่งนี้: jsfiddle.net/1bd8qw76
— csandreas1
2
เทคนิคนี้จะใช้ได้กับ iframes ทั้งหมดเคล็ดลับคือเนื้อหาใน iframe จะต้องตอบสนองเช่นกันและเพิ่มเติมเกี่ยวกับเรื่องนี้ที่นี่: benmarshall.me/responsive-iframes
— Ben Marshall
46

ฉันพบวิธีแก้ปัญหาจากจาก Dave Rupert / Chris Coyier อย่างไรก็ตามฉันต้องการทำให้การเลื่อนใช้ได้ดังนั้นฉันจึงได้รับสิ่งนี้:

// HTML

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

// CSS

.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%;
}
— Avi
แหล่งที่มา
2
หมายเหตุในอนาคตสำหรับฉันหากการเติมด้านล่างเนื้อหาคืออัตราส่วนของความกว้างของเนื้อหา 800x600 คือ% 75, 800x536 คือ% 67
— nerkn
1
นี่เป็นจุดเริ่มต้นที่ดีในการทำให้เลื่อน iframes สำหรับ sarafi และอุปกรณ์ทั้งหมด เศร้ามาก ....
— klewis
นี่คือสิ่งที่ฉันต้องการเพื่อให้ iframe เลื่อนเนื่องจากมันมีความยาวมากกว่า 5,000px รหัสอื่นบังคับให้ iFrame ที่มีความยาวซ้อนทับเนื้อหาด้านล่าง
— penmas
สำหรับ 16: 9 การเติมเต็มด้านล่างควรเป็น 56.25%
— Sergey Sklyar
17

คุณสามารถใช้เทคนิคนี้กล่าวถึงในเว็บไซต์นี้http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

มันมีประโยชน์มากและเข้าใจง่าย สิ่งที่คุณต้องสร้าง

<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>

.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%;
}

นี่คือซอ js ที่คุณแก้ไขสำหรับการสาธิต

— Pragnesh Chaudhari
แหล่งที่มา
10

ตรวจสอบโซลูชันนี้ ... ใช้งานได้สำหรับฉัน >> 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>
— Leo Leoncio
แหล่งที่มา
ฉันได้อัพเดทซอของคุณแล้วเนื่องจากมีบางชิ้นผิดที่นี่และที่นั่น มันเหมือนกันและใช้งานได้เหมือนกัน แต่ไม่มีบิตที่ทำให้สับสน jsfiddle.net/6NSX3/263
— Techno.Shaman
IOS คำนวณความสูงไม่ถูกต้องโดยคำนึงถึงแถบการนำทางด้วย Iframe บน IOS นั้นไม่สามารถเลื่อนได้เช่นกัน
— Tine Koloini
6

DA ถูกต้อง ในซอของคุณเอง iframe ตอบสนองได้แน่นอน คุณสามารถตรวจสอบว่าใน firebug โดยการตรวจสอบขนาดกล่อง iframe แต่องค์ประกอบบางอย่างภายใน iframe นั้นไม่ตอบสนองดังนั้นพวกเขาจึง "โผล่ออกมา" เมื่อขนาดหน้าต่างเล็ก ตัวอย่างเช่นdiv#products-post-wrapperความกว้างของ 8800px

— Philip007
แหล่งที่มา
5

iFrames สามารถตอบสนองเต็มขณะที่การรักษาอัตราส่วนของพวกเขาด้วยเทคนิค 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>
ขยายตัวอย่างข้อมูล

บูมตอบสนองเต็มที่!

— เบ็นมาร์แชล
แหล่งที่มา
3

iframes ไม่สามารถตอบสนองได้ คุณสามารถทำให้คอนเทนเนอร์ iframe ตอบสนองได้ แต่ไม่ใช่เนื้อหาที่แสดงเนื่องจากเป็นหน้าเว็บที่มีความสูงและความกว้างชุดของตัวเอง

ตัวอย่างซอเชื่อมโยงทำงานเพราะมันแสดงลิงค์วิดีโอ youtube แบบฝังที่ไม่ได้ประกาศขนาด

— MGDTech
แหล่งที่มา
นี่เป็นสิ่งที่ทำให้เข้าใจผิด ลิงค์ซอตัวอย่างทำงานได้ดีเช่นกันเมื่อระบุความกว้างและความสูงของ youtube iframe
— Philip007
14
ฉันผิดหวังที่ downvoted รุนแรงมาก ข้อความที่เขาสื่อความสำคัญ iFrames นั้นอันตรายที่จะตอบสนองเพราะคุณอยู่ที่ความต้องการของแหล่งที่มา ใช่ Youtube เป็นข้อยกเว้น แต่ประเด็นของเขายังคงใช้ได้
— MattWithoos
3

ง่ายด้วย CSS:

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

โปรดทราบ : แต่มันจะไม่ทำให้เนื้อหาภายในตอบสนอง!

แก้ไขครั้งที่ 2:สอง:: มี iframe ตอบสนองสองประเภทขึ้นอยู่กับเนื้อหาภายใน:

หนึ่งนั่นคือเมื่อภายในของ iframe เพียงมีวิดีโอหรือภาพหรือหลายตำแหน่งในแนวตั้งที่ด้านบนสองแถวของรหัส CSS เป็นเกือบสมบูรณ์เพียงพอและอัตราส่วนมีความหมาย ...

และอื่น ๆ คือ:

ประเภทแบบฟอร์มการติดต่อ / การลงทะเบียนของเนื้อหาที่ไม่อัตราส่วนทำเราจะต้องเก็บ แต่เพื่อป้องกันไม่ให้เลื่อนจากที่ปรากฏและเนื้อหาภายใต้ไหลภาชนะ บนมือถือคุณไม่เห็นแถบเลื่อนคุณแค่เลื่อนจนกว่าคุณจะเห็นเนื้อหา (ของ 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 */
}
}
— Sándor Zuboly
แหล่งที่มา
1
นี่ง่ายและยอดเยี่ยม
— vaishali kapadia
สิ่งนี้จะไม่รักษาอัตราส่วนภาพเมื่อ iframe ปรับขนาดนั่นคือความสูงยังคงเดิมไม่ว่าความกว้างจะเป็นเท่าไหร่
— ryan
@ryan ฉันได้อัปเดตคำตอบของฉันแล้ว ฉันเห็นด้วยกับคุณบางส่วน btw
— Sándor Zuboly
2

ฉันสังเกตเห็นว่าโพสต์ของ leowebdev ดูเหมือนจะทำงานได้ในตอนท้ายของฉันอย่างไรก็ตามมันทำให้องค์ประกอบสองอย่างของไซต์ที่ฉันพยายามทำ: การเลื่อนและส่วนท้าย

การเลื่อนที่ฉันได้รับกลับมาโดยการเพิ่ม scrolling="yes" รหัสฝังลงใน iframe

ฉันไม่แน่ใจว่าส่วนท้ายถูกทำให้กระเด็นโดยอัตโนมัติเนื่องจากการตอบสนองหรือไม่ แต่หวังว่าคนอื่นจะรู้คำตอบนั้น

— Chris Knabenshue
แหล่งที่มา
2

ลบความสูงและความกว้าง iframe ที่ระบุเป็นพิกเซลและใช้เปอร์เซ็นต์

iframe{  max-width: 100%;}
— Jestin
แหล่งที่มา
1
แต่มันไม่ได้ตอบสนองต่อเนื้อหาภายใน
— Vir
1
เริ่มต้นใช้งาน

เนื่องจากข้อ จำกัด ด้านความปลอดภัยของเบราว์เซอร์คุณจะต้องรวมไฟล์ Javascript ไว้ในหน้า "parent" รวมถึงในหน้าเว็บที่ฝังอยู่ใน iframe ("child")

ในเวอร์ชันปัจจุบันหน้าหลักจะต้องรวม jQuery เวอร์ชันล่าสุด ไม่มีการพึ่งพา jQuery สำหรับฟังก์ชันหน้าย่อย ในรุ่นอนาคตเราต้องการลบการพึ่งพา jQuery สำหรับผู้ปกครองด้วย

หมายเหตุ: พารามิเตอร์“ xdomain” ในการเรียกใช้ฟังก์ชัน makeResponsive () เป็นทางเลือก

ตัวอย่างโค้ด <!-- Activate responsiveness in the "child" page --><script src="/js/jquery.responsiveiframe.js"></script><script> var ri = responsiveIframe(); ri.allowResponsiveEmbedding();</script> <!-- Corresponding code in the "parent" page --><script src="/js/jquery.js"></script><script src="/js/jquery.responsiveiframe.js"></script><script> ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery);</script>
— Ahmed Elcheikh
แหล่งที่มา
0

ด้วยมาร์กอัปต่อไปนี้:

<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;
  }
}
— Dorian
แหล่งที่มา
0

ฉันค้นหาเพิ่มเติมเกี่ยวกับหัวข้อนี้และสุดท้ายได้รับคำตอบที่ดี คุณสามารถลองสิ่งนี้ :

.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>
ขยายตัวอย่างข้อมูล

— พวงมาลัย
แหล่งที่มา
0

ทางออกที่ดีที่สุดในการตอบสนอง "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 ขั้นสูง

— เกม Mizo
แหล่งที่มา
สวัสดีรหัส HTML ของ iframe นั้นเรียบง่ายมีลักษณะเช่นนี้:
— Mizo Games
<div class = "iframe"> <iframe src = ""> </iframe> </div>
— เกม Mizo
จริงๆแล้วฉันใช้กับเว็บไซต์ของฉัน: เกม Al3abMizo และคุณสามารถลองได้โดยการเล่นเกมใด ๆ ที่อุปกรณ์ทุกขนาดหน้าจอ
— เกม Mizo
0

iFrame ตอบสนองอย่างเต็มที่สำหรับสถานการณ์ที่ไม่ทราบอัตราส่วนกว้างยาวและเนื้อหาใน iFrame ตอบสนองเต็มที่

ไม่มีวิธีการใดที่ใช้งานได้สำหรับความต้องการของฉันซึ่งก็คือการสร้าง iFrame ที่ตอบสนองได้อย่างเต็มที่ซึ่งมีเนื้อหาแบบไดนามิกที่ตอบสนองได้อย่างเต็มที่ การรักษาอัตราส่วนภาพทุกประเภทไม่ได้เป็นตัวเลือก

  1. รับความสูงของแถบการนำทางและเนื้อหาใด ๆ ข้างต้นหรือด้านล่างของ 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);
    };

ฉันยังสร้างการหมดเวลาเพื่อที่การปรับขนาดฟังก์ชั่นจะไม่เรียกว่าเป็นล้านครั้ง

— JPEG
แหล่งที่มา
0 
For Example :

<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%;
}
— KTrivedi
แหล่งที่มา
0

ลองดูรหัสเต็มนี้ คุณสามารถใช้คอนเทนเนอร์เป็นเปอร์เซ็นต์เช่นรหัสด้านล่าง:

<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>

ลองชมหน้าตัวอย่างนี้

— ม. หลัก
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.