How to : เซ็ทให้ iframe ใส่ความสูงของframeได้ 100% (iframe height 100%)

2

Posted by admin | Posted in คนทำเว็บ | Posted on 10-10-2009

สืบเนื่องมาจาก ช่วงนั้นทำ เว็บเที่ยวเมืองไทย+จองโรงแรม ซึ่งใช้ affiliate ของ hotelclub
เลยต้องใช้เทคนิค
iframe ในการดึงหน้าเว็บ hotelclub มาใส่ในเว็บเรา โดยที่ยังคงหน้าตาเดิมของเราไว้
เพื่อให้เกิดความน่าเชื่อถือในการจองโรงแรม


แต่ปัญหาก็คือ ความยาวของหน้าเว็บ hotelclub ที่จะดึงมาใส่ใน iframe นั้น เราไม่สามารถกำหนดได้
จะตั้งเป็น scrolling=yes ก็กระไรอยู่ ดูไม่โปรเอาซะเลย

สุดท้าย หลังจากที่ลองมาหลายแบบมากมาย ก็ได้ค้นพบวิธี iframe เป็น 100% แบบไม่ยุ่งยาก
เก็บเข้ากรุไว้เผื่อเจอปัญหานี้อีก หรือสำหรับคนที่ผ่านไปผ่านมาแล้วเจอปัญหาเดียวกันจะเอาไปใช้ก็ไม่ว่ากันค่ะ

เริ่มต้นด้วยการสำรวจหน้าเว็บก่อน
ในที่นี้เว็บที่มีปัญหา ใช้โค้ด html ร่วมกับ css
หากไม่มีก็สร้างไฟล์ .css เพิ่ม โดยใช้  Notepad , Editplus หรือ Text Editor ตัวอื่นๆ
จากนั้นใส่โค้ดนี้ในไฟล์

HTML, BODY {
margin: 0;
padding:0;
height:100%;
}

save เป็นไฟล์ .css ไว้ที่เดียวกับหน้าเว็บที่มีปัญหา

เอาล่ะ เมื่อมีไฟล์ css แล้ว
ในไฟล์  html ที่ต้องการใส่ iframe ต้องเพิ่มลิงค์ให้รู้จักไฟล์ css ที่เราสร้างขึ้นด้วย
โดยการใส่โค้ดด้านล่างในส่วน head ของหน้าเว็บนั้นๆ

<link rel="stylesheet" href="ชื่อไฟล์cssของคุณ.css" type="text/css" media="screen" />


และแล้วก็ถึงคราวพระเอกในท้องเรื่องออกโรง iframe ของเรานั่นเอง
ให้ใส่โค้ดด้านล่างในส่วน Body โดย เปลี่ยน “ใส่ชื่อเว็บหรือลิงค์ที่ต้องการให้โชว์ที่นี่” เป็นชื่อเว็บหรือลิงค์ของคุณ

<iframe style="border: 0px none;" src="ใส่ชื่อเว็บหรือลิงค์ที่ต้องการให้โชว์ที่นี่" frameborder="0" scrolling="auto" align="top" width="100%" height="100%"></iframe>

เรียบร้อยค่ะ ง่ายนิดเดียวเองใช่ม้า! rolleyes

Comments (2)

ไม่ได้ผลพี่ ทำเหมือนพี่เดะๆ เลย มันใช้ได้ในบาง blowser หรือเป่า

น่าจะเป็นงั้นนะคะ ตอนทำเช็คเฉพาะกับ firefox อะค่ะ จำเวอร์ชั่นไม่ได้แล้วด้วย T T

Write a comment