ทำไมต้องพูดสามครั้ง
ทำไมต้องพูดสามครั้ง? สาเหตุหนึ่งเป็นเพราะนี่เป็นหัวข้อที่มีการพูดถึงไม่ดีจริงๆ และอีกอย่างคือเนื่องจากอาจารย์ไทเขียนบทความนี้เมื่อหลายปีก่อน เพื่อพูดคุยเกี่ยวกับ iframe Adaptive Height เหตุผลที่ฉันถามคำถามนี้อีกครั้งเพราะฉันได้พบปัญหานี้ในทุกด้านจริงๆ ในโครงการก่อนหน้านี้ และจำเป็นต้องสรุป ฉันหวังว่านี่จะช่วยคุณได้ โปรดแก้ไขฉันหากมีข้อผิดพลาด
ความสูงของโดเมนและเพจย่อยเดียวกันจะไม่เพิ่มขึ้นแบบไดนามิก
สถานการณ์นี้เป็นวิธีที่ง่ายที่สุด เพียงรับความสูงจริงของหน้าย่อยผ่านสคริปต์โดยตรงและแก้ไขความสูงขององค์ประกอบ iframe แต่มีสองประเด็นที่ต้องสังเกต:
หากมีองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนในหน้าเว็บหรือไม่มีองค์ประกอบแบบลอย สถานการณ์จะซับซ้อนเล็กน้อย เบราว์เซอร์ที่แตกต่างกันมีผลการประมวลผลที่แตกต่างกัน แม้แต่เบราว์เซอร์ที่มีเคอร์เนล Webkit โปรดดูรายละเอียด การสาธิต นี้ ดังนั้นคุณจึงทำการตรวจหาเบราว์เซอร์ ใช้ Math.max เพื่อคำนวณค่าสูงสุด หรือคุณคิดอย่างอื่น
หน้าเว็บที่อยู่ใน iframe อาจมีขนาดใหญ่มากและต้องใช้เวลาในการโหลดนาน เมื่อคำนวณความสูงโดยตรง อาจเป็นไปได้ว่าหน้าเว็บนั้นยังไม่ได้ดาวน์โหลด และจะมีปัญหากับการคำนวณความสูง ดังนั้นจึงควรคำนวณความสูงในเหตุการณ์ onload ของ iframe ควรสังเกตไว้ที่นี่ด้วยว่าต้องใช้โมเดลเหตุการณ์ Microsoft obj.attachEvent เพื่อผูกเหตุการณ์ onload ภายใต้ IE เบราว์เซอร์อื่นๆ สามารถใช้ obj.onload = function(){} ได้โดยตรง
(การทำงาน(){
var _reSetIframe = ฟังก์ชั่น(){
var frame = document.getElementById("frame_content_parent")
พยายาม {
var frameContent = frame.contentWindow.document,
bodyHeight = Math.max
(frameContent.body.scrollHeight,
frameContent.documentElement.scrollHeight);
ถ้า (bodyHeight != frame.height){
frame.height = ความสูงของร่างกาย;
-
-
จับ (เช่น) {
เฟรม.ความสูง = 1800;
-
-
ถ้า (frame.addEventListener){
frame.addEventListener
("load",function(){setInterval(_reSetIframe,200);},false);
}อื่น{
frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
-
-
ในโดเมนเดียวกัน ความสูงของหน้าย่อยจะเพิ่มขึ้นแบบไดนามิก และสคริปต์อาจล้มเหลวโดยสิ้นเชิง
ในตัวอย่างที่สอง ข้อผิดพลาดของสคริปต์จะถูกนำมาพิจารณาด้วย แต่หากสคริปต์ไม่ได้ดำเนินการเลย เนื้อหาใน iframe จะไม่แสดงเนื่องจากความสูงของ iframe ไม่สูงพอ ด้วยเหตุนี้เราจึงมักกำหนดความสูงไว้ล่วงหน้า เพื่อความสะดวกในการควบคุมส่วนหน้า ฉันคิดว่าการเขียนลงในไฟล์ CSS จะเหมาะสมกว่า เมื่อจำเป็นต้องแก้ไข ที่นี่ฉันตั้งค่าตัวเลือก { height:1800px } ควรสังเกตว่าสไตล์ที่เขียนในสไตล์ชีตไม่สามารถดึงข้อมูลได้โดยตรงโดยใช้ node.style[property] สำหรับรุ่น Microsoft ต้องใช้ node.currentStyle[property] (พูดนอกเรื่อง: โมเดล IE ที่น่าเศร้าไม่รองรับ CSS pseudo- class ) สำหรับโมเดล W3C ให้ใช้ window.getComputedStyle(node,null)[property] เพื่อรับมัน ฉันใช้ YUI โดยตรงเพื่อความสะดวก
มีปัญหาอื่นอยู่ที่นี่ เมื่อตั้งค่าความสูงของ iframe ให้มากกว่าความสูงของหน้าที่มีอยู่ แต่ละเบราว์เซอร์จะจัดการต่างกัน ตัวอย่างเช่น ใน Firefox จะต้องคำนวณความสูงขององค์ประกอบเนื้อหา และความสูงขององค์ประกอบ html เท่ากับความสูงของ iframe อย่างไรก็ตาม เมื่อหน้าเว็บมีตำแหน่งที่แน่นอนและองค์ประกอบลอยตัวที่ไม่ชัดเจน จะไม่สามารถเป็นเช่นนั้นได้ ที่ได้มาจากธาตุกาย แน่นอนว่าวิธีแรก ข้อเสียของวิธีจะมีน้อยกว่า โปรดดู การสาธิต นี้สำหรับรายละเอียด