บทความนี้อธิบายวิธีการแก้ปัญหาที่ปรับได้สูงของ IFRAME ใน Cross-Browser ซึ่งใช้งานได้จริงมาก แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการเฉพาะมีดังนี้:
วิธีนี้ใช้ jQuery ดังนั้น jQuery จะต้องนำเข้าสู่หน้า SRC ของ iframe
หน้าหลักค่อนข้างง่ายส่วนใหญ่รวมถึงรหัสต่อไปนี้:
<iframe id = "if1" scrolling = "no" src = "2.html"> </iframe>
รหัสในหน้า src ของ iframe มีดังนี้:
<script type = "text/javascript"> function resizeContent () {$ (window.parent.document) .find ("#if1"). ความสูง ($ ("#content"). ความสูง ()); $ ("#test400"). CSS ("แสดง", ""); resizeContent (); } else {$ ("#test400"). css ("แสดง", "ไม่มี"); resizeContent (); }} $ (เอกสาร) .ready (ฟังก์ชัน () {resizeContent ();}) </script> <div id = "left111"> <div onclick = "test400 ()"> </div> <div> <a href = "productlist.html"> hyperlink HREF = "ProductCategory.html"> HyperLink </a> </div> <div> <a href = "ProductCategory.html"> HyperLink </a> </div> <div> <a href = "productCategory.html"> hyperlink </a style = "display: none; height: 400px;"> </div> <div> <a href = "orders.html"> hyperlink </a> </div> <div> <a href = "keywords.html"> hyperlink </a> href = "#"> ไฮเปอร์ลิงก์ </a> </div> <div> <a href = "#"> hyperLink </a> </div> <div> <a href = "#"> hyperLink </a> </div> <div> <a href = "#"> hyperlink </a> href = "#"> ไฮเปอร์ลิงก์ </a> </div> <br/> </div>หมายเหตุ:
ข้างใน
$ (window.parent.document) .find ("#if1"). ความสูง ($ ("#เนื้อหา"). ความสูง ());ประโยคนี้เดิม:
$ (window.parent.document) .find ("#if1"). ความสูง ($ (เอกสาร) .height ());ความสูงแบบปรับตัวสามารถทำได้ แต่ไม่สามารถปรับขนาดการปรับขนาดได้ เนื่องจากความสูงของเอกสารเป็นความสูงสูงสุดที่แสดงหากคุณคลิกเพื่อขยายที่นี่ iframe จะไม่หดตัว แต่จะแสดงความสูงสูงสุดที่แสดงเท่านั้น
ดังนั้นที่นี่เราต้องใช้คอนเทนเนอร์เลเยอร์พาเรนต์นั่นคือรหัสล่าสุด สิ่งนี้ช่วยให้สามารถปรับตัวได้
ฉันเชื่อว่าคำอธิบายในบทความนี้มีค่าอ้างอิงบางอย่างสำหรับการเขียนโปรแกรม jQuery ของทุกคน