الصفحة الرئيسية>دروس تصميم الويب>دروس جافا سكريبت

استخدم جافا سكريبت للوصول إلى 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 معرف = " معرف " الاسم = " أنام " src = " srcPage.html " التمرير = " لا " frameborder = " 0 " > </iframe> srcPage.html

,<body>

  1. في dom : <h1> يوم الأخت </h1>  
  2. < p > تناول وجبة الإفطار في الصباح، وحدد موعدًا عند الظهر، وغني الكاريوكي في فترة ما بعد الظهر، واستمتع مع أخي في المساء </ p >

دعنا نناقش كيفية تشغيل الصفحتين أعلاه باستخدام JS ضمن IE، وبعد ذلك ناقش طريقة فايرفوكس، وأخيرًا أعطِ مدى التوافق مع IE وفايرفوكس وطريقة تشغيل المتصفح لكائن iframe.

1. الوصول إلى المحتوى وتشغيله في iframe ضمن IE

 

يعلم الجميع أن iframe عبارة عن علامة HTML غير قياسية، وهي علامة متعددة التخطيط يتم إطلاقها بواسطة متصفح IE، وقد دعمت Mozilla أيضًا هذه العلامة لاحقًا. (ثرثرة، هيهي)

1. يحصل عليه IE من خلال document.frames["IframeName"]. مثال: نقوم بإخراج محتوى h1 في srcPage.html في iPage.html كما يلي:

  1. تنبيه ( document .frames [ ") . iName " ] . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) ؛

ستجد أن إضافة التعليمات البرمجية إلى الصفحة لا يبدو أنها تنتج العناصر المطلوبة. لماذا؟ لم أكتشف ذلك بعد. أنا فقط أقوم بإضافة window.onload وسيظهر الإخراج (ملاحظة: تمت كتابة كود JS في هذا الحدث).

لماذا
  1. ؟ بعد التغيير ، تم إخراج

الكود ضمن IE، ولكن لم يتم تعريف document.frames ضمن Firefox

  1. () {  
  2.   تنبيه ( document .frames [ " iName " ] . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) }
  3. ) ؛

2. أي طريقة أخرى للحصول عليها

  1. هي contentWindow ، الكود : window () {  
  2.   فار iObj = document . getElementById ( ' iId ' ) .​​
  3.   تنبيه ( 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 ، الكود : iObj document جزء من يومها ' ؛

يمكنك الوصول إليه من خلال contentWindow، العقد هي نفسها كما كانت من قبل.

2. قم بالوصول إلى المحتوى الموجود في إطار iframe ضمن Firefox.

تدعم Mozilla معيار W3C للوصول إلى كائن المستند الخاص بإطار iframe من خلال IFrameElmRef.contentDocument . من خلال المعيار، يمكنك كتابة مستند واحد أقل، الكود:

  1. var iObj = document . getElementById ( ' iId ' ) . contentDocument ;
  2. تنبيه ( iObj .getElementsByTagName ( ' h1 '
  3. ) [ 0 . InternalHTML = ' أريد أن أكون جزءا من يومها ' ) ;​​​​
  4. ' ) [ 0 ] . firstChild data ) ؛

تتوفر الآن طريقة متوافقة مع هذين المتصفحين، وهي استخدام طريقة contentWindow.

مهلا مهلا! هل يمكنني تشغيل iframe كما أريد؟ إذا كنت لا تزال تشعر بعدم الارتياح، فيمكنك أيضًا إعادة كتابة المحتوى في إطار iframe.

3. أعد كتابة المحتوى في iframe

من خلال وضع التصميم (ضبط المستند على وضع التصميم القابل للتحرير) والمحتوى القابل للتحرير (ضبط المحتوى على وضع قابل للتحرير)، يمكنك إعادة كتابة المحتوى في إطار iframe. الكود:

  1. فار
  2. iObj = document . contentWindow . iObj
  3. document = ' iObj​​​​​​​​​
  4. ​​​​​​​​
  5. ​​​​​​​​
  6. ​​​​​​​​​​
  7. head> ' ) ;
  8. iObj document . writeln ( '
  9. <style> body { background : # 000 ;font-size:9pt;margin : 2px ;
  10. ' </head><body></body> </html> ' )
  11. ؛ وثيقة iObj أغلق ( ) ؛

للحصول على معلومات حول هذين الكائنين، يرجى الرجوع إلى: http://msdn.microsoft.com/en- us/ Library/ms533720(VS.85).aspx

firebug يختبر أداء الكود أعلاه، كما هو موضح في الشكل

قم بالتعليق iObj.document.designMode = 'On'؛

iObj.document.contentEditable = true

كما هو موضح:

لم يتغير التأثير، وكفاءة الوقت تقارب ثلاثة أضعاف ما كانت عليه قبل التعليق التوضيحي. مهلا مهلا. يشير هذان الكائنان إلى أساليب الكتابة التي يستخدمها بعض الأشخاص على الإنترنت لإعادة كتابة المحتوى في iframe. في الواقع، ليست هناك حاجة لاستخدام designMode وcontentEditable ما لم تكن هناك احتياجات أخرى.

4. ارتفاع iframe التكيفي

باستخدام المبادئ المذكورة أعلاه، من السهل جدًا تنفيذ ذلك، فقط قم بتعيين قيمة ارتفاع iframe على قيمة ارتفاع المستند الموجود بداخله. الكود

  1. : نافذة التحميل = ( function () {  
  2. فار   iObj = document .getElementById ( ' iId ' ) ; iObj
  3. height = iObj document .scrollHeight } ) ؛​​​​​​
  4. ​​

​بسبب هذا المصطلح التقني للويب، مهلا، نتن!

المواد المرجعية:

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/ webpagedesign/20080516/8536.html

http://www.nohack.cn/jsj/safe/2006-10-05/8156.html
مقالات ذات صلة