حيوي إدراج جافا سكريبت إلى HTML التي تستخدم الوثيقة.الكتابة

StackOverflow https://stackoverflow.com/questions/53945

  •  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.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top