หน้าแรก>การสอนการออกแบบเว็บไซต์>การสอนจาวาสคริปต์

ใช้จาวาสคริปต์เพื่อเข้าถึงและใช้งาน Dom ใน iframe

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-06-11 16:22:06

หลายๆ คนมีความคิดมาโดยตลอดว่าคงจะดีไม่น้อยหากพวกเขาสามารถใช้งาน iframe ได้ตามต้องการ ด้วยวิธีนี้ เพจแบบคงที่มีความสามารถในการปรับใช้ เค้าโครงหลายเพจแบบรวม ที่เทียบเท่ากับการรวมและต้องการในเพจไดนามิกพื้นหลัง php, jsp และ asp

ด้วยความช่วยเหลือของ Javascript เราสามารถโหลดเนื้อหาของหน้า html แบบไดนามิกที่ชี้โดยแอตทริบิวต์วัตถุ iframe src เหมือนพื้นหลัง การดำเนินการดังกล่าวจำเป็นต้องจัดเตรียมสองเพจ โดยหนึ่งเพจคือเพจที่มี iframe ตั้งอยู่ ( ชื่อเพจ: iPage.html ) และอีกเพจคือเพจที่ชี้ไปโดยแอตทริบิวต์ iframe src ( ชื่อเพจ: srcPage.html )

iPage.html, dom ใน <body>:

  1. < iframe id = " iId " ชื่อ = " ฉันชื่อ " src = " srcPage.html " เลื่อน = “ ไม่ “ frameborder = " 0 " > </iframe> srcPage.html

,<body>in

  1. dom : <h1> วัน น้อง สาว </h1>  
  2. < p > กินอาหารเช้าในตอนเช้า ออกเดทตอนเที่ยง ร้องเพลงคาราโอเกะในช่วงบ่าย และเที่ยวเล่นกับน้องชายในตอนเย็น </ p >

เรามาหารือเกี่ยวกับวิธีใช้งานสองเพจข้างต้นด้วย JS ภายใต้ IE แล้ว หารือเกี่ยวกับวิธีการของ Firefox และสุดท้ายให้ความเข้ากันได้กับ IE และ Firefox วิธีการของเบราว์เซอร์ในการใช้งานวัตถุ iframe

1. เข้าถึงและดำเนินการเนื้อหาใน iframe ภายใต้ IE

 

ทุกคนรู้ดีว่า iframe เป็นแท็ก HTML ที่ไม่ได้มาตรฐาน เป็นแท็กหลายรูปแบบที่เปิดใช้งานโดยเบราว์เซอร์ IE ต่อมา Mozilla ก็สนับสนุนแท็กนี้ด้วย (ซุบซิบ อิอิ)

1. IE ได้รับมันผ่าน document.frames["IframeName"] ตัวอย่าง: เรา ส่งออกเนื้อหาของ h1 ใน srcPage.html ใน iPage.html JS เป็นดังนี้

  1. : alert ( document .frames [ " iName " ] . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) ;

คุณจะพบว่าการเพิ่มโค้ดลงในเพจดูเหมือนจะไม่แสดงผลสิ่งที่ต้องการ ทำไม? ฉันยังคิดไม่ออก ฉันเพิ่งเพิ่ม window.onload เป็นประจำและผลลัพธ์จะปรากฏขึ้น (หมายเหตุ: รหัส JS ถูกเขียนลงในเหตุการณ์นี้) ใครรู้เกี่ยวกับเรื่องนี้บอกฉันได้ไหม เหตุใดหลังจากการเปลี่ยนแปลง โค้ดจึงมีเอาต์พุตภายใต้ IE แต่ไม่

  1. ได้ กำหนด document.frames ภาย ใต้ Firefox - -  
  2.   alert ( document .frames [ " iName " ] . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) ;
  3. 2. กล่าว

คือ อีกวิธีหนึ่งคือ contentWindow เพื่อ

  1. รับ มัน , รหัส : window - -  
  2.   var iObj = เอกสาร . getElementById ( ' iId ' )​​​
  3.   alert ( iObj . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) ;
  4. }) ;

วิธีนี้ผ่านการทดสอบของ ie6, ie7, firefox2.0 และ firefox3.0 เฮ้-เฮ้ (หลังจากตรวจสอบออนไลน์แล้ว ฉันพบช่องโหว่บัฟเฟอร์ล้นใน Mozilla Firefox iframe.contentWindow.focus ซึ่งเสี่ยงต่อการโจมตีด้วยการแทรกสคริปต์

ต่อมาฉันได้ยินมาว่าสิ่งนี้สามารถป้องกันได้ในเบื้องหลัง และฉันก็โล่งใจ อย่างไรก็ตาม ฉันยังคง หวังว่า Firefox เวอร์ชันใหม่จะสามารถแก้ไข

ได้

  1. อันตราย ดัง กล่าว ) 3. เปลี่ยน เนื้อหา ชื่อ h1 ใน srcPage.html , code : iObj . document ส่วนหนึ่งของวันของเธอ ' ;

เข้าถึงได้ผ่าน contentWindow โหนดก็เหมือนเดิม

2. เข้าถึงเนื้อหาใน iframe ภายใต้ Firefox

Mozilla รองรับมาตรฐาน W3C
  1. สำหรับ

การเข้าถึงออบเจ็กต์เอกสารของ iframe ผ่าน IFrameElmRef.contentDocument

  1. iObj = document . getElementById ( ' iId ' ) . contentDocument ;
  2. alert ( iObj . getElementsByTagName ( ' p​​​​​​​​​​​​
  3. ​​​​​​​​ ' )[ 0 ] . firstChild . data ) ;

ขณะนี้มีวิธีที่เข้ากันได้กับเบราว์เซอร์ทั้งสองนี้ ซึ่งก็คือการใช้เมธอด contentWindow

เฮ้เฮ้! ฉันสามารถใช้งาน iframe ได้ตามต้องการหรือไม่? หากคุณยังรู้สึกไม่สบายใจ คุณสามารถเขียนเนื้อหาใน iframe ใหม่ได้

3. เขียนเนื้อหาใหม่ใน iframe

คุณสามารถเขียนเนื้อหาใหม่ใน iframe ได้ด้วย designMode (การตั้งค่าเอกสารเป็นโหมดการออกแบบที่แก้ไขได้) รหัส:

  1. var
  2. iObj = เอกสาร . getElementById ( '
  3. iObj​​​​​​​​​
  4. ​​​​​​​​
  5. ​​​​​​​​
  6. ​​​​​​​​​​​​​
  7. head > ' )
  8. ; iObj . document .​
  9. ​​​​​​​​​​​

'

  1. </head> <body> </body> </html> '
  2. ; iObj . ปิด ( ) ;

us/ Library/ms533720(VS.85).aspx

firebug ทดสอบประสิทธิภาพของโค้ดด้านบน ดังแสดงในรูป

ใส่ความคิดเห็น iObj.document.designMode = 'On';

iObj.document.contentEditable = true

;

เอฟเฟกต์ไม่มีการเปลี่ยนแปลง และประสิทธิภาพด้านเวลาก็เกือบสามเท่าของก่อนคำอธิบายประกอบ เฮ้-เฮ้ วัตถุทั้งสองนี้อ้างอิงถึงวิธีการเขียนของบางคนบนอินเทอร์เน็ตเพื่อเขียนเนื้อหาใหม่ใน iframe จริงๆ แล้ว ไม่จำเป็นต้องใช้ designMode และ contentEditable เว้นแต่จะมีความต้องการอื่นๆ

4. ความสูงแบบปรับได้ของ iframe

ด้วยหลักการข้างต้น มันค่อนข้างง่ายที่จะนำไปใช้ เพียงตั้งค่าความสูงของ iframe เป็นค่าความสูงของเอกสารที่อยู่ข้างใน รหัส

  1. : window .onload = ( function - -  
  2. var   iObj = document . documentElement ; ตอน นี้ คุณ มี ความ
  3. เข้าใจ ใหม่
  4. เกี่ยว กับ วิธี การ ใช้ งาน iframe ด้วย JS​​​​​

​เนื่องจากศัพท์ทางเทคนิคของเว็บนี้ เฮ้ เหม็น!

เอกสารอ้างอิง:

https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla

http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx

http://www.kuqin.com/ การออกแบบหน้าเว็บ/20080516/8536.html

http://www.nohack.cn/jsj/safe/2006-10-05/8156.html
บทความที่เกี่ยวข้อง