2008-09-16 18 views
34

मैं एक वेब पेज पर काम कर रहा हूँ जहाँ मैं एक AJAX कॉल कि जैसे HTML का एक हिस्सा देता है बना रही हूँ:आप गतिशील रूप से लोड किए गए जावास्क्रिप्ट ब्लॉक को कैसे निष्पादित करते हैं?

<div> 
    <!-- some html --> 
    <script type="text/javascript"> 
    /** some javascript */ 
    </script> 
</div> 

मैं डोम में पूरी बात डालने हूँ, लेकिन जावास्क्रिप्ट नहीं है चल रहा है क्या इसे चलाने का कोई तरीका है?

कुछ विवरण: मैं स्क्रिप्ट ब्लॉक में क्या नियंत्रित कर सकता हूं (इसलिए मैं इसे किसी फ़ंक्शन में नहीं बदल सकता) जिसे मुझे निष्पादित करने के लिए पूरे ब्लॉक की आवश्यकता है। मैं प्रतिक्रिया पर eval कॉल नहीं कर सकता क्योंकि जावास्क्रिप्ट HTML के एक बड़े ब्लॉक के भीतर है। मैं जावास्क्रिप्ट को अलग करने के लिए किसी प्रकार का रेगेक्स कर सकता हूं और फिर उस पर eval कॉल कर सकता हूं, लेकिन यह बहुत भाग्यशाली है। किसी को भी बेहतर तरीका पता है?

उत्तर

14

किसी तत्व की आंतरिक HTML प्रॉपर्टी सेट करके जोड़ा गया स्क्रिप्ट निष्पादित नहीं होता है। एक नया div बनाने का प्रयास करें, अपना आंतरिक HTML सेट करें, फिर इस नए div को DOM में जोड़ दें। उदाहरण के लिए:

 
<html> 
<head> 
<script type='text/javascript'> 
function addScript() 
{ 
    var str = "<script>alert('i am here');<\/script>"; 
    var newdiv = document.createElement('div'); 
    newdiv.innerHTML = str; 
    document.getElementById('target').appendChild(newdiv); 
} 
</script> 
</head> 
<body> 
<input type="button" value="add script" onclick="addScript()"/> 
<div>hello world</div> 
<div id="target"></div> 
</body> 
</html> 
+1

यह स्क्रिप्ट आईई 7 में काम नहीं करती है। आईई 7 में एपेंड चाइल्ड फ़ंक्शन के साथ एक बग है। – Eddie

+2

Google क्रोम 26 का उपयोग करके काम नहीं करता है। – prashn64

+3

किसी भी आधुनिक ब्राउज़र (फ़ायरफ़ॉक्स, क्रोम, सफारी) पर काम नहीं करता है – Roy

14

यदि आप div या कुछ भरने के लिए प्रतिक्रिया का उपयोग कर रहे हैं तो आपको रेगेक्स का उपयोग करने की आवश्यकता नहीं है। आप getElementsByTagName का उपयोग कर सकते हैं।

div.innerHTML = response; 
var scripts = div.getElementsByTagName('script'); 
for (var ix = 0; ix < scripts.length; ix++) { 
    eval(scripts[ix].text); 
} 
+7

इस इंजेक्शन हमलों और अन्य वैक्टर करने के लिए अत्यधिक संवेदनशील है ... –

1

शायद सबसे अच्छा तरीका शायद डीओएम के माध्यम से स्क्रिप्ट ब्लॉक की सामग्री को पहचानने और निकालने के लिए होगा।

हालांकि मैं सावधान रहूंगा .. अगर आप कुछ ऑफ साइट कॉल की सीमा को दूर करने के लिए इसे कार्यान्वित कर रहे हैं तो आप एक सुरक्षा छेद खोल रहे हैं।

जो कुछ भी आप कार्यान्वित करते हैं उसका उपयोग एक्सएसएस के लिए किया जा सकता है।

+0

मुझे सही अगर मैं गलत हूँ, लेकिन जिस तरह से मैं इस तरह की स्थितियों में एक्सएसएस भेद्यता को समझता हूं, यह केवल एक मुद्दा है यदि आप किसी और के ऑनलाइन खाते तक पहुंच प्राप्त करने में सक्षम होने के बारे में चिंतित हैं, और इस प्रकार संवेदनशील जानकारी चुराने में सक्षम हैं, लेकिन यदि उपयोगकर्ताओं के लिए यह संभव नहीं है साइट पर लॉगिन करें तो यह चिंता नहीं है। –

2

एक विकल्प है कि इनर HTML का उपयोग करके अजाक्स कॉल से डीओएम में वापसी को न केवल डंप करें।

आप प्रत्येक नोड को गतिशील रूप से सम्मिलित कर सकते हैं, और फिर स्क्रिप्ट चल जाएगी।

अन्यथा, ब्राउज़र बस मानता है कि आप एक टेक्स्ट नोड डालने वाले हैं, और स्क्रिप्ट को अनदेखा करते हैं।

इवल का उपयोग करना बुरा है, क्योंकि इसे जावास्क्रिप्ट वीएम को निकाल दिया जाना चाहिए और पास की स्ट्रिंग जेआईटी की आवश्यकता है।

+12

यदि आप गतिशील रूप से प्रत्येक नोड को सम्मिलित करने के बारे में बताते हैं तो यह बहुत अच्छा होगा। – mandza

0

आप लोकप्रिय अजाक्स पुस्तकालयों में से एक का उपयोग कर सकते हैं जो आपके लिए यह मूल रूप से करता है। मुझे Prototype पसंद है। आप केवल evalScripts जोड़ सकते हैं: अपने अजाक्स कॉल के हिस्से के रूप में सच है और यह स्वचालित रूप से होता है।

-1

नीचे थोड़ी अलग दृष्टिकोण है जो तथ्य यह है कि अगर टैग प्रकार शामिल = "text/xml" जावास्क्रिप्ट के अंदर निष्पादित नहीं होगा का उपयोग करता है:

function preventJS(html) { 
    return html.replace(/<script(?=(\s|>))/i, '<script type="text/xml" '); 
} 

आप यहाँ और अधिक पढ़ सकते हैं - JavaScript: How to prevent execution of JavaScript within a html being added to the DOM। यदि यह आपके लिए काम करता है, तो कृपया यहां दी गई ब्राउज़र और संस्करण के बारे में जानकारी के साथ एक टिप्पणी छोड़ दें।

5

जबकि @Ed से स्वीकृत उत्तर। फ़ायरफ़ॉक्स, Google क्रोम या सफारी ब्राउज़र के वर्तमान संस्करणों पर काम नहीं करता है, मैंने गतिशील रूप से जोड़े गए स्क्रिप्ट को आमंत्रित करने के लिए अपने उदाहरण को अनुकूलित करने में कामयाब रहे।

आवश्यक परिवर्तन केवल डीओएम में स्क्रिप्ट जोड़ने के तरीके में हैं।इसे innerHTML के रूप में जोड़ने की बजाय चाल एक नया स्क्रिप्ट तत्व बनाना था और वास्तविक स्क्रिप्ट सामग्री को बनाए गए तत्व में innerHTML के रूप में जोड़ें और फिर स्क्रिप्ट तत्व को वास्तविक लक्ष्य में जोड़ना था।

<html> 
<head> 
<script type='text/javascript'> 
function addScript() 
{ 
    var newdiv = document.createElement('div'); 

    var p = document.createElement('p'); 
    p.innerHTML = "Dynamically added text"; 
    newdiv.appendChild(p); 

    var script = document.createElement('script'); 
    script.innerHTML = "alert('i am here');"; 
    newdiv.appendChild(script); 

    document.getElementById('target').appendChild(newdiv); 
} 
</script> 
</head> 
<body> 
<input type="button" value="add script" onclick="addScript()"/> 
<div>hello world</div> 
<div id="target"></div> 
</body> 
</html> 

यह फ़ायरफ़ॉक्स 42, गूगल क्रोम 48 और सफारी 9.0.3 पर मेरे लिए काम करता

संबंधित मुद्दे