เนื่องจาก iframe ที่ไม่มีเส้นขอบสามารถรวมเข้ากับหน้าเว็บได้อย่างราบรื่น จึงเป็นไปได้ที่จะอัปเดตข้อมูลบางส่วนของหน้าโดยไม่ต้องรีเฟรชหน้า อย่างไรก็ตาม ขนาดของ iframe ไม่สามารถ "ปรับขนาดได้" เท่าเลเยอร์ ดังนั้นจึงเกิดปัญหา ใช้งานอยู่ ปัญหา มากเกินไปไม่ดีเมื่อตั้งค่าความสูงของ iframe และยิ่งแย่ลงไปอีก ตอนนี้ ให้ฉันบอกวิธีปรับความสูงของ iframe แบบไดนามิก โดยส่วนใหญ่เป็นฟังก์ชัน JS ต่อไปนี้:
รหัสโปรแกรม
ฟังก์ชั่น SetWinHeight (obj)
-
var win=obj;
ถ้า (document.getElementById)
-
ถ้า (ชนะ && !window.opera)
-
ถ้า (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
อย่างอื่นถ้า (win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
-
-
-
สุดท้ายนี้ เมื่อเพิ่ม iframe คุณจะไม่สูญเสียแอตทริบิวต์ onload แน่นอน ID จะต้องตรงกับ win ในฟังก์ชันด้วย
รหัสโปรแกรม
<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></ ไอเฟรม>
โซลูชัน iframe สำหรับสถานการณ์อื่น (ง่ายมาก)
หมายเหตุสำคัญ: ที่อยู่หน้าเว็บที่คุณต้องกรอกใน src= จะต้องอยู่ในไซต์เดียวกันกับหน้านี้ ไม่เช่นนั้นจะเกิดข้อผิดพลาดและแจ้งว่า "Access Denied!" (จริงๆ แล้ว นี่เป็นเพราะปัญหาข้ามโดเมนของ Js ที่นำไปสู่การปฏิเสธการเข้าถึง)
ฉันเคยพบปัญหานี้มาก่อน ฉันค้นหาทางออนไลน์เพื่อหาคำตอบและพบว่ามีหลายคนประสบปัญหานี้เช่นกัน ตอนนี้ฉันจะแบ่งปันวิธีแก้ปัญหา
1. สร้างไฟล์ Bottom.js และกรอกโค้ดต่อไปนี้ (เพียง 2 บรรทัด)
parent.document.all("ชื่อ ID เฟรม").style.height=document.body.scrollHeight;
parent.document.all("ชื่อ ID เฟรม").style.width=document.body.scrollWidth;
ชื่อ ID เฟรมที่นี่คือ ID ของ Iframe ตัวอย่างเช่น:
＜IFRAME id="ชื่อ ID เฟรม" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%">＜/IFRAME>
2. เพิ่มไฟล์แต่ละไฟล์ที่รวมอยู่ในเว็บไซต์ของคุณ
＜ภาษาสคริปต์ = "JavaScript" src = "bottom.js"/>＜/script">
3. โอเค พักสักวัน!
ผ่านการทดสอบภายใต้ WINXP และ IE6 มันง่ายมาก!
ใช้ความสูงแบบปรับได้ของ iframe
ตระหนักถึงความสูงที่ปรับได้ของ iframe ซึ่งสามารถปรับให้เข้ากับความยาวของหน้าได้โดยอัตโนมัติ เพื่อหลีกเลี่ยงปรากฏการณ์แถบเลื่อนที่ปรากฏบนหน้าและ iframe ในเวลาเดียวกัน
รหัสโปรแกรม
<script type="text/javascript">
//** iframe ปรับให้เข้ากับหน้าโดยอัตโนมัติ**//
//ป้อนรายชื่อ iframe ที่คุณต้องการปรับความสูงโดยอัตโนมัติตามความสูงของหน้า
//แยก ID ของแต่ละ iframe ด้วยเครื่องหมายจุลภาค เช่น ["myframe1", "myframe2"] มีได้เพียงรูปแบบเดียว ดังนั้นจึงไม่จำเป็นต้องใช้เครื่องหมายจุลภาค
//กำหนด ID ของ iframe
var iframeids=["ทดสอบ"]
//หากเบราว์เซอร์ของผู้ใช้ไม่รองรับ iframe ไม่ว่าจะซ่อน iframe หรือไม่ ใช่ หมายถึง ซ่อนอยู่ ไม่ใช่ หมายถึง ไม่ได้ซ่อนอยู่
var iframehide = "ใช่"
ฟังก์ชั่น dyniframesize()
-
var dyniframe=อาร์เรย์ใหม่()
สำหรับ (i=0; i<iframeids.length; i++)
-
ถ้า (document.getElementById)
-
// ปรับความสูงของ iframe โดยอัตโนมัติ
dyniframe[dyniframe.length] = document.getElementById(iframeids);
ถ้า (dyniframe && !window.opera)
-
dyniframe.style.display = "บล็อก"
ถ้า (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) // หากเบราว์เซอร์ของผู้ใช้คือ NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
อย่างอื่นถ้า (dyniframe.Document && dyniframe.Document.body.scrollHeight) // หากเบราว์เซอร์ของผู้ใช้คือ IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
-
-
//ตามพารามิเตอร์ที่ตั้งไว้ จัดการปัญหาการแสดงผลของเบราว์เซอร์ที่ไม่รองรับ iframe
ถ้า ((document.all || document.getElementById) && iframehide=="ไม่ใช่")
-
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display = "บล็อก"
-
-
-
ถ้า (window.addEventListener)
window.addEventListener("โหลด", dyniframesize, false)
อย่างอื่นถ้า (window.attachEvent)
window.attachEvent("onload", dyniframesize)
อื่น
window.onload=dyniframesize
</สคริปต์>
แทร็กแบ็ค: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1608312