ฉันจะปรับขนาดเนื้อหาของ iframe ได้อย่างไร

ฉันจะปรับขนาดเนื้อหาของ iframe ได้อย่างไร (ในตัวอย่างของฉันคือหน้า HTML และไม่ใช่ป๊อปอัป) ในหน้าเว็บไซต์ของฉัน

ตัวอย่างเช่นฉันต้องการแสดงเนื้อหาที่ปรากฏใน iframe ที่ 80% ของขนาดดั้งเดิม

โซลูชันของ Kipควรใช้กับ Opera และ Safari หากคุณเปลี่ยน CSS เป็น:

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }
</style>

คุณอาจต้องการระบุ overflow: hidden บน #frame เพื่อป้องกันแถบเลื่อน

ฉันพบวิธีแก้ปัญหาที่ใช้งานได้ใน IE และ Firefox (อย่างน้อยในรุ่นปัจจุบัน) บน Safari / Chrome iframe จะถูกปรับขนาดเป็น 75% ของขนาดดั้งเดิม แต่เนื้อหาภายใน iframe จะไม่ถูกปรับขนาดเลย ใน Opera สิ่งนี้ดูเหมือนจะไม่ทำงาน นี่เป็นความลับเล็ก ๆ น้อย ๆ ดังนั้นหากมีวิธีที่ดีกว่าที่จะทำฉันยินดีรับข้อเสนอแนะ

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

หมายเหตุ: ฉันต้องใช้wrapองค์ประกอบสำหรับ Firefox ด้วยเหตุผลบางอย่างใน Firefox เมื่อคุณลดขนาดวัตถุลง 75% มันยังคงใช้ขนาดดั้งเดิมของรูปภาพเพื่อเหตุผลด้านการจัดวาง (ลองลบ div ออกจากโค้ดตัวอย่างด้านบนแล้วคุณจะเห็นว่าฉันหมายถึงอะไร)

ฉันพบสิ่งนี้จากคำถามนี้

หลังจากดิ้นรนกับสิ่งนี้เป็นเวลาหลายชั่วโมงเพื่อให้มันทำงานได้ใน IE8, 9 และ 10 นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน

CSS แบบแยกส่วนนี้ทำงานใน FF 26, Chrome 32, Opera 18 และ IE9 -11 ตั้งแต่ 1/7/2014:

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

สำหรับ IE8 ให้ตั้งค่าความกว้าง / ความสูงให้ตรงกับ iframe และเพิ่ม -ms-zoom ไปที่ div. container container:

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

เพียงใช้วิธีการที่คุณชื่นชอบสำหรับการสูดดมเบราว์เซอร์เพื่อรวม CSS ที่เหมาะสมตามเงื่อนไขดูที่มีวิธีทำ CSS ตามเงื่อนไขเฉพาะของเบราว์เซอร์ในไฟล์ * .css หรือไม่ สำหรับความคิดบางอย่าง

IE7 เป็นสาเหตุที่หายไปตั้งแต่ -ms-zoom ไม่มีอยู่จนกระทั่ง IE8

นี่คือ HTML จริงที่ฉันทดสอบด้วย:

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

ฉันเพิ่งทดสอบและสำหรับฉันไม่มีวิธีแก้ไขปัญหาอื่นทำงาน ฉันแค่ลองทำสิ่งนี้และทำงานได้อย่างสมบูรณ์บน Firefox และ Chrome เช่นเดียวกับที่ฉันคาดไว้:

<div class='wrap'>
    <iframe ...></iframe>
</div>

และ CSS:

.wrap {
    width: 640px;
    height: 480px;
    overflow: hidden;
}

iframe {
    width: 76.92% !important;
    height: 76.92% !important;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

ลดขนาดเนื้อหาทั้งหมดลง 30% ร้อยละความกว้าง / ความสูงของหลักสูตรจะต้องมีการปรับตาม (1 / scale_factor)

คำตอบที่ติดตามได้ของ lxs : ฉันสังเกตเห็นว่ามีทั้งแท็กzoomและ--webkit-transformแท็กในเวลาเดียวกันดูเหมือนว่าจะทำให้ Chrome (รุ่น 15.0.874.15) สับสนโดยทำเอฟเฟกต์ซูมสองเท่า ฉันสามารถแก้ไขปัญหาด้วยการแทนที่zoomด้วย-ms-zoom(กำหนดเป้าหมายเฉพาะที่ IE) ออกจาก Chrome เพื่อใช้ประโยชน์จาก--webkit-transformแท็กและสิ่งต่างๆก็หมดไป

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

เช่นเพื่อปรับเนื้อหา iframe เป็น 80%:

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;
}

โดยทั่วไปเพื่อให้ได้ iframe ขนาดเดียวกันคุณจำเป็นต้องปรับขนาด

html {zoom: 0.4;}? -)

คิดว่าฉันจะแบ่งปันสิ่งที่ฉันคิดขึ้นมาโดยใช้สิ่งที่ได้รับจากข้างบน ฉันไม่ได้ตรวจสอบ Chrome แต่ใช้งานได้ใน IE, Firefox และ Safari เท่าที่ฉันจะบอกได้

ค่าออฟเซ็ตและอัตราการซูมที่เฉพาะเจาะจงในตัวอย่างนี้ใช้สำหรับลดขนาดและจัดกึ่งกลางเว็บไซต์สองแห่งใน iframes สำหรับแท็บ Facebook (ความกว้าง 810px)

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

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>

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

function()
{
    var _wrapWidth=$('#wrap').width();
    var _frameWidth=$($('#frame')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$('#frame')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform='scale('+percent+')';
    frame.style.webkitTransformOrigin='top left';
    frame.style.MozTransform='scale('+percent+')';
    frame.style.MozTransformOrigin='top left';
    frame.style.oTransform='scale('+percent+')';
    frame.style.oTransformOrigin='top left';
  };

สิ่งนี้จะทำให้ iframe และมาตราส่วนเนื้อหามีความกว้าง 100% ของส่วนตัด (หรือเปอร์เซ็นต์ที่คุณต้องการ) ในฐานะโบนัสที่เพิ่มเข้ามาคุณไม่จำเป็นต้องตั้งค่า css ของเฟรมให้เป็นค่าตายตัวเนื่องจากจะถูกตั้งค่าแบบไดนามิกคุณเพียงแค่ต้องกังวลเกี่ยวกับวิธีที่คุณต้องการให้ div div แสดง

ฉันได้ทำการทดสอบแล้วมันใช้งานได้กับ chrome, IE11 และ firefox

ฉันคิดว่าคุณสามารถทำได้โดยการคำนวณความสูงและความกว้างที่คุณต้องการด้วย javascript (ผ่าน document.body.clientWidth ฯลฯ ) แล้วฉีด iframe ลงใน HTML ของคุณดังนี้:

var element = document.getElementById ("myid");
element.innerHTML + = "<iframe src = 'http: //www.google.com' height = '200' width = '" + document.body.clientWidth * 0.8 + "' />";

ฉันไม่ได้ทดสอบใน IE6 แต่ดูเหมือนว่าจะทำงานกับคนดี :)

สำหรับผู้ที่มีปัญหาในการทำให้ใช้งานได้ใน IE จะเป็นประโยชน์ในการใช้งาน-ms-zoomตามที่แนะนำด้านล่างและใช้ฟังก์ชั่นซูมใน#wrapdiv ไม่ใช่iframeid จากประสบการณ์ของฉันด้วยzoomฟังก์ชั่นที่พยายามปรับขนาด div iframe ของ#frameมันจะปรับขนาด iframe ไม่ใช่เนื้อหาภายใน (ซึ่งเป็นสิ่งที่คุณต้องการ)

ดูเหมือนว่านี้ ใช้งานได้กับฉันใน IE8, Chrome และ FF

#wrap {
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;
}

นี่เป็นวิธีแก้ปัญหาของฉันในหน้าเว็บที่มีความกว้าง 890 พิกเซล

#frame { 
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0; 

}

#wrap #frame โซลูชันทำงานได้ดีตราบใดที่ตัวเลขใน #wrap คือ #frame คูณด้วยอัตราส่วนสเกล มันแสดงเฉพาะส่วนหนึ่งของเฟรมที่ปรับขนาดลง คุณสามารถดูได้ที่นี่เพื่อลดขนาดเว็บไซต์และวางลงในรูปแบบ pinterest (ด้วยปลั๊กอิน woodmark jQuery):

http://www.genautica.com/sandbox/woodmark-index.html

อาจไม่ใช่ทางออกที่ดีที่สุด แต่ดูเหมือนว่าจะใช้ได้

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>

เห็นได้ชัดว่าไม่พยายามแก้ไขพาเรนต์เพียงเพิ่มสไตล์ "ซูม: 50%" ลงในเนื้อความของเด็กด้วยจาวาสคริปต์

อาจกำหนดรูปแบบขององค์ประกอบ "HTML" แต่ไม่ได้ลอง

หาก html ของคุณมีสไตล์ด้วย css คุณสามารถเชื่อมโยงสไตล์ชีทที่แตกต่างกันสำหรับขนาดที่แตกต่างกัน

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

ความคิดอื่นจะมีองค์ประกอบฝั่งเซิร์ฟเวอร์ที่จะเปลี่ยน HTML สิ่งที่ชอบของคุณสมบัติการซูม firefox 2.0 แน่นอนว่านี่ไม่ใช่การซูมที่สมบูรณ์แบบ แต่ดีกว่าไม่มีอะไร

นอกเหนือจากนั้นฉันก็ตกอยู่ในความคิด

ตามที่กล่าวมาฉันสงสัยว่าคุณสามารถทำได้ บางทีคุณอาจจะสามารถปรับขนาดอย่างน้อยข้อความตัวเองโดยการตั้งค่ารูปแบบ
ไม่ได้ทดสอบไม่แน่ใจว่าใช้งานได้และจะไม่ปรับขนาดกล่องหรือรูปภาพfont-size: 80%;