การสอนทักษะการผลิตเว็บเพจ: IFRAME Adaptive Height

บทความบทนำของ wulin.com (www.vevb.com): มีคนอาจยังไม่พบปัญหานี้ ก่อนอื่นให้อธิบายว่าอะไรคือความสูงที่ปรับตัวได้ ความสูงของ Iframe Adaptive ที่เรียกว่านั้นขึ้นอยู่กับความงามของอินเทอร์เฟซและการโต้ตอบเส้นขอบและแถบเลื่อนของ iframe นั้นซ่อนอยู่ทำให้มันเป็นไปไม่ได้ที่จะเห็นว่ามันเป็น iframe หาก iframe เรียกหน้าความสูงคงที่เดียวกันเสมอเราเพียงแค่ต้องเขียนความสูงของ iframe ถึงตาย และ

ฉันอ่านบทความหลายสิบบทความในบทความก่อนหน้าและขุดพิมพ์ซ้ำจำนวนมาก มีบทความสามหรือห้าบทความที่เป็นต้นฉบับ ในบทความต้นฉบับเหล่านี้โดยทั่วไปพวกเขาพูดถึงวิธีการปรับตัวเข้ากับสิ่งที่คงที่ แต่พวกเขาไม่ได้พิจารณาวิธีการซิงโครไนซ์แบบไดนามิกหลังจาก JS ทำงาน DOM นอกจากนี้ในแง่ของความเข้ากันได้การวิจัยยังไม่สมบูรณ์เช่นกัน

ฉันหวังว่าจะทำการวิจัยเชิงลึกในสองด้านนี้

บางทีใครบางคนยังไม่ได้ติดต่อกับปัญหานี้ มาอธิบายก่อนว่าอะไรคือความสูงที่ปรับตัวได้ ความสูงของ Iframe Adaptive ที่เรียกว่านั้นขึ้นอยู่กับความงามของอินเทอร์เฟซและการโต้ตอบเส้นขอบและแถบเลื่อนของ iframe นั้นซ่อนอยู่ทำให้มันเป็นไปไม่ได้ที่จะเห็นว่ามันเป็น iframe หาก iframe เรียกหน้าความสูงคงที่เดียวกันเสมอเราเพียงแค่ต้องเขียนความสูงของ iframe ถึงตาย หาก iframe ต้องการสลับหน้าหรือหน้ารวมจำเป็นต้องดำเนินการ DOM แบบไดนามิกโปรแกรมจะต้องซิงโครไนซ์ความสูง iframe และความสูงที่แท้จริงของหน้ารวม

โดยวิธีการถ้าคุณต้องใช้ iframe มันจะทำให้เกิดปัญหามากเกินไปในการพัฒนาส่วนหน้า

มีการปฏิบัติแบบดั้งเดิมสองแบบ:

วิธีที่ 1: หลังจากแต่ละหน้ารวมอยู่ในแต่ละหน้าโดยการโหลดเนื้อหาของตัวเองดำเนินการ JS เพื่อรับความสูงของหน้านี้แล้วซิงโครไนซ์ความสูง iframe ของหน้าหลัก

วิธีที่ 2: ดำเนินการ JS ในเหตุการณ์ OnLoad ของหน้าหลัก iframe รับเนื้อหาความสูงของหน้ารวมแล้วซิงโครไนซ์ความสูง

จากมุมมองของการบำรุงรักษารหัสวิธีที่สองดีกว่าวิธีหนึ่งเนื่องจากวิธีหนึ่งหน้ารวมแต่ละหน้าจะต้องแนะนำชิ้นส่วนของรหัสเดียวกันเพื่อทำสิ่งนี้และมีการสร้างสำเนาจำนวนมาก

ทั้งสองวิธีจัดการกับสิ่งที่เงียบสงบนั่นคือพวกเขาจะดำเนินการเฉพาะเมื่อมีการโหลดเนื้อหา หาก JS ดำเนินการเปลี่ยนแปลงความสูงที่เกิดจาก DOM มันก็ไม่สะดวกนัก

หากคุณทำช่วงเวลาในหน้าต่างหลักได้รับความสูงของหน้ารวมอยู่ตลอดเวลาแล้วทำการซิงโครไนซ์มันสะดวกและแก้ปัญหาของ JS ที่ทำงาน DOM หรือไม่? คำตอบคือใช่

หน้าตัวอย่าง: หน้าหลัก iframe_a.html, หน้ามีหน้า iframe_b.htm และ iframe_c.html

รหัสหน้าหลักตัวอย่าง:

<iframe id = frame_content src = iframe_b.html scrolling = no frameborder = 0> </iframe> <script type = text/javascript>

ฟังก์ชั่น reinitiframe () {

var iframe = document.getElementById (frame_content);

พยายาม{

iframe.height = iframe.contentwindow.document.documentelement.scrollheight;

} catch (ex) {}

-

window.setInterval (reinitiframe (), 200);

</script> จะมีปัญหากับประสิทธิภาพหรือไม่?

ฉันทำการทดสอบและเปิด 5 windows (IE6, IE7, FF, Opera, Safari) เพื่อเรียกใช้งานรหัสนี้ซึ่งจะไม่มีผลกระทบใด ๆ ต่อ CPU และมันจะถูกปรับเป็น 2ms โดยไม่มีผลกระทบใด ๆ

มาพูดคุยเกี่ยวกับปัญหาความเข้ากันได้ของแต่ละเบราว์เซอร์ วิธีการไปถึงความสูงที่ถูกต้อง มันคุ้มค่าที่จะเปรียบเทียบทั้งสองร่าง scrollheight และ documentelement.scrollheight โปรดทราบว่าบทความนี้ใช้ doctype นี้ doctypes ที่แตกต่างกันไม่ควรส่งผลกระทบต่อผลลัพธ์ แต่หากหน้าของคุณไม่ได้ประกาศ doctype ให้เพิ่มหนึ่งรายการก่อน

<! doctype html public -// w3c // dtd html 4.01 // en> ผนวกรหัสทดสอบต่อไปนี้เข้ากับหน้าหลักเพื่อส่งออกทั้งสองค่าตัวอย่างรหัส:

<div> <pution> ตรวจสอบความสูง </putton> </div> <script type = text/javascript>

ฟังก์ชั่น checkheight () {

var iframe = document.getElementById (frame_content);

var bheight = iframe.contentwindow.document.body.scrollheight;

var dheight = iframe.contentwindow.document.documentelement.scrollheight;

การแจ้งเตือน (bheight: + bheight +, dheight: + dheight);

-

</script> ถูกโหลดและสามารถเปลี่ยนเลเยอร์ที่วางตำแหน่งอย่างแน่นอนเพื่อเปลี่ยนความสูงของหน้าแบบไดนามิก หากการขยายเลเยอร์ความสูงของหน้าจะได้รับการสนับสนุน ตัวอย่างรหัส:

<div> <button> สลับการซ้อนทับ </ Button>

</div>

<div style = ความสูง: 160px; ตำแหน่ง: ญาติ>

<div id = สไตล์การซ้อนทับ = ตำแหน่ง: สัมบูรณ์; ความกว้าง: 280px; ความสูง: 280px; แสดง: ไม่มี;> </div>

</div>

<script type = text/javascript>

ฟังก์ชั่น ToggleOverlay () {

var overlay = document.getElementById ('ซ้อนทับ');

Overlay.style.display = (Overlay.style.display == 'none')? 'บล็อก': 'ไม่มี';

-

</script> รายการต่อไปนี้แสดงค่าการทดสอบของรหัสด้านบนในแต่ละเบราว์เซอร์:

(bheight = body.scrollheight, dheight = documentelement.scrollheight, red = ค่าข้อผิดพลาด, สีเขียว = ค่าที่ถูกต้อง)

/ เลเยอร์ถูกซ่อนเมื่อมีการขยายเลเยอร์

Bheight Dheight Bheight Dheight

IE6 184 184 184 303

IE7 184 184 184 303

FF 184 184 184 303

โอเปร่า 181 181 300 300

Safari 184 184 303 184

มาเพิกเฉยต่อปัญหาที่โอเปร่าน้อยกว่า 3 พิกเซลน้อยกว่าอื่น ๆ ... จะเห็นได้ว่าหากไม่มีการวางตำแหน่งที่แน่นอนค่าทั้งสองจะเท่ากันและไม่สำคัญว่าคุณจะใช้อะไร

แต่ถ้ามีการแสดงของแต่ละเบราว์เซอร์จะแตกต่างกันและมันผิดที่จะใช้ค่าใด ๆ เพียงอย่างเดียว แต่กฎข้อหนึ่งสามารถพบได้นั่นคือใช้ค่าสูงสุดสองค่าและเข้ากันได้กับแต่ละเบราว์เซอร์ ดังนั้นรหัสหน้าหลักของเราจะต้องเปลี่ยนเป็นสิ่งนี้:

ฟังก์ชั่น reinitiframe () {var iframe = document.getElementById (frame_content);

พยายาม{

var bheight = iframe.contentwindow.document.body.scrollheight;

var dheight = iframe.contentwindow.document.documentelement.scrollheight;

var height = math.max (bheight, dheight);

iframe.height = ความสูง;

} catch (ex) {}

-

window.setInterval (reinitiframe (), 200); ด้วยวิธีนี้ปัญหาความเข้ากันได้จะได้รับการแก้ไขโดยทั่วไป โดยวิธีการไม่เพียง แต่เลเยอร์ที่อยู่ในตำแหน่งที่แน่นอนจะส่งผลกระทบต่อค่าการลอยจะทำให้เกิดความแตกต่างระหว่างค่าทั้งสอง

หากคุณแสดงให้เห็นถึงการสาธิตคุณจะพบว่าในเบราว์เซอร์อื่นยกเว้นเช่นเมื่อชั้นถูกขยายและซ่อนค่าความสูงที่ได้รับจะยังคงอยู่ที่ความสูงที่เพิ่มขึ้นของ 303 แทนที่จะเป็นค่าที่แท้จริงที่ซ่อนอยู่ 184 ซึ่งหมายความว่ามันไม่สามารถหดกลับได้หลังจากที่สูงขึ้น ปรากฏการณ์นี้สามารถเกิดขึ้นได้เมื่อสลับระหว่างหน้ารวมที่แตกต่างกัน เมื่อเปลี่ยนจากหน้าสูงเป็นหน้าต่ำความสูงที่ได้รับจะยังคงมีค่าสูงเท่ากัน

มันสามารถสรุปได้ว่า: เมื่อความสูงของรูปแบบ iframe สูงกว่าความสูงจริงของเอกสารความสูงจะถูกใช้เป็นความสูงของแบบฟอร์มและเมื่อความสูงของแบบฟอร์มต่ำกว่าความสูงจริงของเอกสารความสูงจริงของเอกสารจะถูกนำมาเป็นความสูงจริงของเอกสาร ดังนั้นจึงจำเป็นต้องหาวิธีการตั้งค่าความสูงเป็นค่าที่ต่ำกว่าเอกสารจริงก่อนที่จะซิงโครไนซ์ ดังนั้นเพิ่ม onload = this.height = 100″ ไปยัง iframe เพื่อให้หน้าสั้นพอเมื่อโหลดแล้วซิงโครไนซ์กับความสูงเท่ากัน

ค่านี้ถูกกำหนดในแอปพลิเคชันจริงและสั้นพอ แต่ไม่สั้นเกินไปมิฉะนั้นจะมีการกะพริบอย่างชัดเจนในเบราว์เซอร์เช่น FF เมื่อใช้งาน DOM หน้าหลักไม่สามารถตรวจสอบได้ดังนั้นความสูงสามารถลดลงได้หลังจากทำงาน DOM

ในหนึ่งในโครงการจริงของฉันฉันไม่ได้ทำสิ่งนี้ในแง่ของการชั่งน้ำหนักต้นทุนและผลประโยชน์เพราะฉันต้องแทรกรหัสนี้ลงในฟังก์ชั่น DOM แต่ละรายการซึ่งมีราคาแพงเกินไปและในความเป็นจริงมันไม่ได้เป็นอันตรายถึงชีวิตที่จะหดชั้นหรือไม่หดตัว รวมถึงในการสาธิตสิ่งนี้ไม่ได้ทำ หากผู้อ่านมีวิธีที่ดีกว่าโปรดแจ้งให้เราทราบ

นี่คือรหัสสำหรับหน้าหลักสุดท้าย:

<iframe id = frame_content src = iframe_b.html scrolling = no frameborder = 0> </iframe>

<script type = text/javascript>

ฟังก์ชั่น reinitiframe () {

var iframe = document.getElementById (frame_content);

พยายาม{

var bheight = iframe.contentwindow.document.body.scrollheight;

var dheight = iframe.contentwindow.document.documentelement.scrollheight;

var height = math.max (bheight, dheight);

iframe.height = ความสูง;

} catch (ex) {}

-

window.setInterval (reinitiframe (), 200);

</script>