حيوي إدراج جافا سكريبت إلى HTML التي تستخدم الوثيقة.الكتابة
-
09-06-2019 - |
سؤال
أنا حاليا تحميل نمط العلبة الخفيفة المنبثقة التي الأحمال انها HTML من XHR الاتصال.هذا المحتوى ثم عرضها في 'مشروط' المنبثقة باستخدام element.innerHTML = content
هذا يعمل مثل السحر.
في قسم آخر من هذا الموقع يمكنني استخدام فليكر 'شارة' (http://www.elliotswan.com/2006/08/06/custom-flickr-badge-api-documentation/) لتحميل الصور فليكر بشكل حيوي.ويتم ذلك بما في ذلك علامة النصي الذي يحمل فليكر جافا سكريبت ، الذي بدوره يفعل بعض document.write
البيانات.
كل منهم العمل تماما عندما تدرج في HTML.فقط عند تحميل فليكر شارة رمز داخل العلبة الخفيفة, لا يتم تقديم محتوى على الإطلاق.يبدو أن استخدام innerHTML
الكتابة document.write
البيانات في اتخاذ خطوة بعيدة جدا, ولكن أنا لا يمكن العثور على أي دليل في تطبيقات جافا سكريبت (FF2&3, IE6 و 7) من هذا السلوك.
يمكن لأي شخص أن يوضح إذا كان هذا ينبغي أو لا ينبغي العمل ؟ شكرا
المحلول
في عام ، علامات البرنامج النصي لا يعدم عند استخدام innerHTML.في حالتك هذه ، document.write
دعوة شأنها أن تمحو كل ما سبق في الصفحة.بيد أن يترك لك دون كل ما مستند HTML.كتابة كان من المفترض أن تضيف.
مسج HTML أساليب التلاعب سيتم تنفيذ النصوص في HTML بالنسبة لك, هو خدعة ثم التقاط المكالمات document.write
والحصول على HTML في المكان المناسب.لو انها بسيطة بما فيه الكفاية ، ثم شيئا مثل هذا:
var content = '';
document.write = function(s) {
content += s;
};
// execute the script
$('#foo').html(markupWithScriptInIt);
$('#foo .whereverTheDocumentWriteContentGoes').html(content);
فإنه يحصل معقدة على الرغم من.إذا كان البرنامج النصي على مجال آخر, فإنه سيتم تحميلها بشكل غير متزامن ، لذلك سيكون لديك إلى الانتظار حتى يتم ذلك للحصول على المحتوى.أيضا ما إذا كان يكتب HTML في منتصف جزء دون التفاف العناصر التي يمكنك بسهولة اختيار ؟ writeCapture.js (الكشف الكامل:كتبت ذلك) يعالج كل هذه المشاكل.أود أن أوصى فقط استخدامه, ولكن على الأقل يمكنك إلقاء نظرة على مدونة لنرى كيف يتعامل مع كل شيء.
تحرير:هنا الصفحة مما يدل على ما يبدو التأثير الذي تريده.
نصائح أخرى
أنا خلقت اختبار بسيط الصفحة التي توضح المشكلة:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Document Write Testcase</title>
</head>
<body>
<div id="container">
</div>
<div id="container2">
</div>
<script>
// This doesn't work!
var container = document.getElementById('container');
container.innerHTML = "<script type='text/javascript'>alert('foo');document.write('bar');<\/script>";
// This does!
var container2 = document.getElementById('container2');
var script = document.createElement("script");
script.type = 'text/javascript';
script.innerHTML = "alert('bar');document.write('foo');";
container.appendChild(script);
</script>
</body>
</html>
هذه صفحة التنبيهات 'شريط' بصمات 'فو' ، في حين يتوقع أن أيضا تنبيه 'فو' طباعة 'شريط'.ولكن للأسف منذ script
الوسم هو جزء من أكبر صفحة HTML, لا أستطيع أن يفرد هذا الوسم و إلحاق مثل المثال أعلاه.حسنا, يمكنني, لكن هذا يتطلب المسح الضوئي innerHTML
المحتوى script
العلامات ، واستبدالها في السلسلة من قبل النائبة ، ومن ثم إدخالها باستخدام DOM.الأصوات لا أن تافهة.
استخدام document.writeln(content);
بدلا من document.write(content)
.
ومع ذلك ، فإن أفضل طريقة هي باستخدام سلسلة من innerHTML
, مثل هذا:
element.innerHTML += content;
على element.innerHTML = content;
الأسلوب الذي سوف يحل محل المحتوى القديم مع الجديد ، فإنه سيتم الكتابة فوق العنصر innerHTML!
في حين +=
مشغل في element.innerHTML += content;
سيتم إضافة النص الخاص بك بعد المحتوى القديم.(مثل ما document.write
لا.)
document.write
هو مستنكر كما أنها تأتي.بفضل عجائب جافا سكريبت, رغم أن, يمكنك فقط تعيين وظيفة الخاصة بك إلى write
طريقة document
الكائن الذي يستخدم innerHTML
على عنصر من اختيارك إلحاق الموردة المحتوى.
هل يمكنني الحصول على بعض التوضيح أولا أن أتأكد أن المشكلة ؟
document.write
المكالمات إضافة المحتوى إلى العلامات عند نقطة في العلامات التي تحدث فيها.على سبيل المثال إذا كنت تشمل document.write
المكالمات في وظيفة ولكن استدعاء الدالة في أي مكان آخر ، document.write
الناتج سوف يحدث عند نقطة في العلامات الدالة تعريف لا أين هو دعا.
ولذلك هذا العمل في جميع فليكر document.write
البيانات سوف تحتاج إلى أن تكون جزءا من content
في element.innerHTML = content
.هذا بالتأكيد القضية ؟
قد اختبار بسرعة إذا كان هذا يجب أن تعمل في كل طريق إضافة واحدة و بسيطة document.write
دعوة في المحتوى الذي يتم تعيين innerHTML
و انظر ماذا يفعل هذا:
<script>
var content = "<p>1st para</p><script>document.write('<p>2nd para</p>');</script>"
element.innerHTML = content;
</script>
إذا كان هذا يعمل ، مفهوم document.write
العامل في محتوى النحو innerHTML
عنصر قد عمل فقط.
لدي إحساس أنه لن ينجح ، ولكن يجب أن تكون واضحة جدا لاختبار مفهوم.
إذا كنت تستخدم دوم طريقة لإنشاء script
عنصر إلحاق هذه القائمة عنصر و هذا يسبب محتوى المرفقة script
عنصر للاعدام ؟ هذا يبدو جيدا.
أنت تقول أن العلامة النصي هو جزء من أكبر صفحة HTML و بالتالي لا يمكن أن يفرد.يمكنك أن تعطي العلامة النصي هوية ولا هدف ؟ ربما أنا في عداد المفقودين شيء واضح هنا.
في نظرية, نعم, أنا يمكن أن يفرد العلامة النصي بهذه الطريقة.المشكلة هي أننا يحتمل أن يكون العشرات من الحالات التي يحدث فيها ذلك ، لذلك أنا أحاول أن أجد سببا أو وثائق من هذا السلوك.
أيضا ، script
الوسم لا يبدو أن تكون جزءا من DOM بعد ذلك يحصل على تحميل.في بيئتنا ، container
div لا تزال فارغة ، لذا لا يمكنني جلب script
الوسم.يجب أن تعمل ، على الرغم لأنه في بلدي على سبيل المثال فوق البرنامج النصي لا تحصل على تنفيذها, ولكن لا يزال جزءا من DOM.