บทความนี้อธิบายวิธีการของ JS ในการใช้ความสูงของ IFRAME Adaptive แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
ฉันมีปัญหากับการปรับตัวในระดับสูงของ IFRames มาก่อนและรหัส JS จำนวนมากดูเหมือนจะเป็นใบ้ใน FF ต่อมารหัสต่อไปนี้ได้รับการเรียกคืนโดยฉันจากกองรหัสพันที่อ้างว่าเข้ากันได้กับ FF ฉันใช้มันใช้งานง่ายมาก โดยเฉพาะอย่างยิ่งสำหรับคนอย่างฉันที่มี JS ระดับต่ำ (ฉันอายมาก) รหัสนี้ง่ายและเข้าใจง่ายและสะดวกในการปรับเปลี่ยน เพียงคัดลอกและวางรหัสต่อไปนี้ลงในแท็ก <body> ของหน้าเว็บที่ IFRAME อยู่และแก้ไขชื่อ ID (โปรดทราบว่ามีสองสถานที่ที่จะแก้ไขและตำแหน่งที่อธิบายไว้ในรหัส)
แสดงความยินดีกับเพื่อนที่สร้างรหัสนี้
ขั้นตอนที่ 1: ป้อนรหัส JS ต่อไปนี้ภายใต้แท็ก <body>
<scriptLanguage = "JavaScript"> ฟังก์ชั่น AdjustFramesize () {var frm = document.getElementById ("iframe1"); // แทนที่ iframe1 ด้วยชื่อ id ของคุณ var subweb = document.frames? document.frames ["iframe1"] เอกสาร: frm.contentDocument; if (frm! = null && subweb! = null) {frm.style.height = "0px"; // เริ่มต้นมันมิฉะนั้นความสูงของหน้าขนาดใหญ่จะถูกเก็บไว้ frm.style.height = subweb.documentelement frm.style.width = subweb.documentelement.scrollwidth+"px"; subweb.body.style.overflowx = "auto"; subweb.body.style.overflowy = "auto"; }} </script>ขั้นตอนที่ 2: เพิ่ม id = "iframe1" onload = "adjustFramesize ()" ลงในแท็ก iframe
ตัวอย่างเช่น: รหัสคัดลอกรหัสมีดังนี้: <iframe id = "iframe1" onload = "adjustFramesize ()" การเลื่อน = "ไม่" src = "iframe1.html" width = "100%" เป้าหมาย = "_ self" frameborder = "0">
รหัสนี้มีข้อเสียเล็กน้อยนั่นคือระยะห่างระหว่างเนื้อหาใน iframe และเส้นขอบด้านนอก (ถ้ามีเส้นขอบด้านนอก) มีขนาดเล็กเล็กน้อยดังนั้นคุณสามารถปรับได้อย่างเหมาะสมด้วยตัวเอง นอกจากนี้ยังไม่มีการทดสอบเบราว์เซอร์อื่นยกเว้น IE6.0 หรือสูงกว่าและ FF และไม่พบข้อบกพร่องอื่น ๆ หากคุณพบปัญหาระหว่างการใช้งานหรือมีวิธีแก้ปัญหาที่ดีกว่าโปรดแบ่งปัน
หากหน้า iframe มีหน้า Ajax-loaded หรือเพิ่มเนื้อหาผ่าน JS แบบไดนามิกคุณสามารถเพิ่มวิธีการต่อไปนี้:
1: เพิ่มเนื้อหาต่อไปนี้ในหน้าย่อย
// แก้ไขฟังก์ชั่นที่อยู่หน้าต่างพาเรนต์การเปลี่ยนแปลง () {window.top.location.hash = "#ความสูง =" + $ (เอกสาร) .Height ();}แก้ไขส่วนของ DOM เพื่อเรียกวิธีนี้
2: เพิ่มหน้าหลัก
// ความสูง Adaptive var iframe = document.getElementById ("iframe1"); ฟังก์ชั่น iframeHeight () {var hash = window.location.hash.slice (1), h; if (hash && /height=/.test(hash)) {h = hash.replace ("ความสูง =", ""); iframe.style.height = h+"px"; window.location.hash = "#temp"; // ป้องกันความสูงจากไม่เปลี่ยนแปลงเมื่อคลิกหน้าอื่น ๆ } settimeout (iframeheight, 100);} iframeHeight ();สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเทคนิคการดำเนินงาน JSON ใน JavaScript", "บทสรุปของเอฟเฟกต์การสลับและเทคนิคการสลับ JavaScript", "สรุปเทคนิคการค้นหา JavaScript และเทคนิคการสรุป JavaScript โครงสร้างข้อมูลและเทคนิคอัลกอริทึม "," บทสรุปของอัลกอริทึมและเทคนิคการสำรวจ JavaScript Traversal "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน