मुझे पता document.writeहै कि बुरा अभ्यास माना जाता है; और मैं तीसरे पक्ष के विक्रेता को प्रस्तुत करने के कारणों की एक सूची को संकलित करने की उम्मीद कर रहा हूं कि वे document.writeअपने विश्लेषिकी कोड के कार्यान्वयन में उपयोग क्यों नहीं करें ।
document.writeनीचे एक बुरा अभ्यास के रूप में दावा करने के लिए कृपया अपना कारण शामिल करें ।
जवाबों:
अधिक गंभीर समस्याओं में से कुछ:
document.write (इसके बाद DW) XHTML में काम नहीं करता है
डीडब्ल्यू सीधे डोम को संशोधित नहीं करता है, और अधिक हेरफेर को रोकने (इस का प्रमाण खोजने की कोशिश कर रहा है, लेकिन यह सबसे अच्छा स्थिति में है)
पेज लोड होने के बाद निष्पादित DW पृष्ठ को अधिलेखित कर देगा, या नया पृष्ठ लिख देगा, या काम नहीं करेगा
डीडब्ल्यू निष्पादित करता है जहां सामना किया गया है: यह किसी दिए गए नोड बिंदु पर इंजेक्ट नहीं कर सकता है
DW प्रभावी रूप से क्रमबद्ध पाठ लिख रहा है, जो DOM के वैचारिक रूप से काम करने का तरीका नहीं है, और बग बनाने के लिए एक आसान तरीका है (.innerHTML की भी यही समस्या है)
सुरक्षित और डोम के अनुकूल डोम हेरफेर विधियों का उपयोग करना बेहतर है
document.writeदस्तावेज़ को लोड करने के बाद बुलाया जाता है
वास्तव में कुछ भी गलत नहीं है document.write, प्रति से। समस्या यह है कि इसका दुरुपयोग करना वास्तव में आसान है। सकल, यहाँ तक कि।
एनालिटिक्स कोड (जैसे Google Analytics) की आपूर्ति करने वाले विक्रेताओं के संदर्भ में, यह वास्तव में उनके लिए इस तरह के स्निपेट्स वितरित करने का सबसे आसान तरीका है
जब तक आप इसका इस्तेमाल करने के बाद दस्तावेज़ लोड होने की कोशिश नहीं करते हैं ,document.writeस्वाभाविक बुराई, मेरी विनम्र राय में है।
addEventListenerलिए है?
document.writeकुछ विशेष शर्तों के पूरा होने पर स्क्रिप्ट सम्मिलित करने वाले इनवोकेशन नहीं चलाएगा ।
document.writeHTML5 Boilerplate index.html उदाहरण से एक और वैध उपयोग आता है ।
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>मैंने json2.js JSON parse / stringify polyfill ( IE7 और उसके बाद के संस्करण की आवश्यकता) का उपयोग करने के लिए एक ही तकनीक देखी है ।
<script>window.JSON || document.write('<script src="json2.js"><\/script>')</script>scriptDOM मैनिपुलेशन के माध्यम से एक तत्व सम्मिलित करते हैं , तो क्या इसे सिंक्रोनाइज़ किया गया है? जब तक यह नहीं है, यह एक प्रतिस्थापन नहीं है।
onloadजब आप एसिंक्रोनसली लोड की गई स्क्रिप्ट उपयोग के लिए उपलब्ध हो, तो यह निर्धारित करने के लिए आप DOM ईवेंट का उपयोग कर सकते हैं।
src) । अन्यथा इसे "जितनी जल्दी हो सके" निष्पादित किया जाएगा, अतुल्यकालिक रूप से।
यह आपके पेज को ब्लॉक कर सकता है
document.writeपृष्ठ लोड होने के दौरान केवल काम करता है; यदि आप इसे पृष्ठ लोड होने के बाद कहते हैं, तो यह पूरे पृष्ठ को अधिलेखित कर देगा।
इसका प्रभावी रूप से मतलब है कि आपको इसे इनलाइन स्क्रिप्ट ब्लॉक से कॉल करना होगा - और यह ब्राउज़र को उस पेज के प्रसंस्करण भागों से रोकता है जो पालन करते हैं। राइटिंग और इमेजेज तब तक डाउनलोड नहीं किए जाएंगे जब तक राइटिंग ब्लॉक खत्म नहीं हो जाता।
समर्थक:
कोन:
document.writeकि बनाता है <script>कुछ निश्चित परिस्थितियों में टैग। Developers.google.com/web/updates/2016/08/…
यहां मेरा ट्वोपेंस मूल्य है, सामान्य तौर पर आपको document.writeभारी उठाने के लिए उपयोग नहीं करना चाहिए , लेकिन एक उदाहरण है जहां यह निश्चित रूप से उपयोगी है:
http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
मैंने हाल ही में AJAX स्लाइडर गैलरी बनाने की कोशिश की है। मैंने दो नेस्टेड डिविज़ बनाए और जेएस के साथ width/ heightऔर overflow: hiddenबाहरी को लागू किया <div>। यह इतना था कि इस घटना में कि ब्राउज़र जेएस अक्षम था, div गैलरी में छवियों को समायोजित करने के लिए तैरती थी - कुछ अच्छा सुंदर गिरावट।
बात यह है कि ऊपर दिए गए लेख के अनुसार, सीएसएस के इस जेएस अपहरण ने तब तक किक नहीं किया जब तक कि पेज लोड नहीं हुआ, जिससे एक क्षणिक चमक पैदा हुई, क्योंकि डिव को लोड किया गया था। इसलिए पेज लोड होने के साथ मुझे एक सीएसएस नियम लिखने या एक शीट शामिल करने की आवश्यकता थी।
जाहिर है, यह एक्सएचटीएमएल में काम नहीं करेगा, लेकिन चूंकि एक्सएचटीएमएल एक मृत बतख (और IE में टैग सूप के रूप में प्रस्तुत करता है) में से कुछ प्रतीत होता है, यह DOCTYPE की आपकी पसंद का पुन: मूल्यांकन करने के लायक हो सकता है ...
यह पृष्ठ पर सामग्री को अधिलेखित करता है जो सबसे स्पष्ट कारण है लेकिन मैं इसे "बुरा" नहीं कहूंगा।
जब तक आप JavaScript का उपयोग करके एक संपूर्ण दस्तावेज़ नहीं बना रहे हैं, तब तक इसका बहुत उपयोग नहीं होता है, जिस स्थिति में आप दस्तावेज़ के साथ शुरू कर सकते हैं।
फिर भी, आप वास्तव में DOM का लाभ नहीं उठा रहे हैं जब आप document.write का उपयोग करते हैं - आप दस्तावेज़ में पाठ का एक बूँद डंप कर रहे हैं तो मैं कहूँगा कि यह खराब रूप है।
div.innerHTML = "<label for='MySelect'>Choose One</label><select id='MySelect'><option value='foo' selected=''>foo</option><option value='bar'>bar</option></select>";? ऐसा लगता है कि यह अनावश्यक और कम पठनीय कोड का उत्पादन करेगा। यह दृष्टिकोण जॉन रेसिग और अन्य जेएस डेवलपर्स अधिवक्ता के बिल्कुल विपरीत है।
यह XML रेंडरिंग (जैसे एक्सएचटीएमएल पेज) का उपयोग कर पेजों को तोड़ता है।
सर्वश्रेष्ठ : कुछ ब्राउज़र HTML रेंडरिंग पर वापस जाते हैं और सब कुछ ठीक काम करता है।
संभावित : कुछ ब्राउज़र XML रेंडरिंग मोड में document.write () फ़ंक्शन को अक्षम करते हैं।
सबसे खराब : जब भी डॉक्यूमेंट को राइट किया जाता है तो कुछ ब्राउजर एक XML एरर को आग लगा देते हैं।
मेरे सर के ऊपर से चला गया:
document.writeपेज लोड या बॉडी लोड में उपयोग करने की आवश्यकता है। इसलिए यदि आप अपने पेज कंटेंट डॉक्यूमेंट को अपडेट करने के लिए किसी अन्य समय में स्क्रिप्ट का उपयोग करना चाहते हैं। राइट बहुत ज्यादा बेकार है।
तकनीकी रूप document.writeसे केवल HTML पेज अपडेट होंगे न कि XHTML / XML। IE इस तथ्य के बहुत माफ करने लगता है लेकिन अन्य ब्राउज़र नहीं होंगे।
Chrome document.writeकुछ मामलों में स्क्रिप्ट सम्मिलित करने वाले ब्लॉक कर सकता है । जब ऐसा होता है, तो यह कंसोल में यह चेतावनी प्रदर्शित करेगा:
एक पार्सर-अवरोधक, क्रॉस-ऑरिजिन स्क्रिप्ट, ..., document.write के माध्यम से मंगाई गई है। यदि डिवाइस में नेटवर्क खराब है, तो इसे ब्राउज़र द्वारा ब्लॉक किया जा सकता है।
.writeइसे ब्राउज़र उल्लंघन माना जाता है क्योंकि यह पृष्ठ को रेंडर करने से पार्सर को रोक देता है। पार्सर संदेश प्राप्त करता है कि दस्तावेज़ को संशोधित किया जा रहा है; इसलिए, यह अवरुद्ध हो जाता है जब तक कि JS ने अपनी प्रक्रिया पूरी नहीं कर ली। केवल इस समय पार्सर फिर से शुरू होगा।
ऐसी विधि को नियोजित करने का सबसे बड़ा परिणाम प्रदर्शन कम है। ब्राउज़र को पृष्ठ सामग्री लोड करने में अधिक समय लगेगा। लोड समय पर प्रतिकूल प्रतिक्रिया इस बात पर निर्भर करती है कि दस्तावेज़ को क्या लिखा जा रहा है। यदि आप एक जोड़ रहे हैं तो आपको बहुत अधिक अंतर नहीं दिखेगा<p> DOM से 50% की एक सरणी को पारित करने के विरोध में DOM में टैग - कुछ जो कि जावास्क्रिप्ट लाइब्रेरीज़ के लिए हैं (कुछ जो मैंने वर्किंग कोड में देखे हैं और परिणामस्वरूप 11 सेकंड की देरी हुई है - बेशक, यह आपके हार्डवेयर पर भी निर्भर करता है)।
सब सब में, यह सबसे अच्छा है अगर आप इसे मदद कर सकते हैं तो इस विधि को स्पष्ट करें।
अधिक जानकारी के लिए document.write () के खिलाफ हस्तक्षेप करना देखें
Google-Chrome देव उपकरण ' लाइटहाउस ऑडिट ' द्वारा किए गए विश्लेषण के आधार पर ,
धीमे कनेक्शन पर उपयोगकर्ताओं के लिए, बाहरी स्क्रिप्ट्स को गतिशील रूप से इंजेक्शन के माध्यम
document.write()से सेकंड के दसियों पेज लोड में देरी हो सकती है।
document.write बुरा व्यवहार है है कि आप एक ऐसे परिदृश्य के साथ नहीं आ सकते हैं जहाँ आपको एक बेहतर विकल्प नहीं मिल सकता है।document.write।
स्रोत कोड स्ट्रिंग के मूल्यांकन के रूप में डॉक्यूमेंट.राइट () (और .innerHTML) के बारे में कोई सोच सकता है। यह कई अनुप्रयोगों के लिए बहुत उपयोगी हो सकता है। उदाहरण के लिए यदि आपको किसी स्रोत से स्ट्रिंग के रूप में HTML कोड मिलता है, तो इसे "मूल्यांकन" करना आसान है।
लिस्प के संदर्भ में, डोम हेरफेर एक सूची संरचना में हेरफेर करने जैसा होगा, जैसे कि सूची (नारंगी) बनाकर करें:
(cons 'orange '())और document.write () एक स्ट्रिंग का मूल्यांकन करने जैसा होगा, जैसे एक स्रोत कोड स्ट्रिंग का मूल्यांकन करके एक सूची बनाएं:
(eval-string "(cons 'orange '())")लिस्प में लिस्ट मैनिपुलेशन का उपयोग करके कोड बनाने की बहुत उपयोगी क्षमता भी है (जैसे जेएस पार्स ट्री बनाने के लिए "डोम स्टाइल" का उपयोग करना)। इसका मतलब है कि आप "स्ट्रिंग शैली" के बजाय "DOM शैली" का उपयोग करके एक सूची संरचना का निर्माण कर सकते हैं, और फिर उस कोड को चला सकते हैं, जैसे कि इसके लिए:
(eval '(cons 'orange '()))यदि आप सरल लाइव संपादकों की तरह कोडिंग टूल को लागू करते हैं, तो डॉक्यूमेंट को लिखने की क्षमता है, उदाहरण के लिए document.write () या .innerHTML का उपयोग करना। लिस्प इस मायने में आदर्श है, लेकिन आप जेएस में बहुत अच्छा सामान भी कर सकते हैं, और कई लोग ऐसा कर रहे हैं, जैसे कि http://jsn.com/
डॉक्यूमेंट का नुकसान। मुख्य रूप से इन 3 कारकों पर निर्भर करता है:
क) कार्यान्वयन
डॉक्यूमेंट.राइट () का इस्तेमाल ज्यादातर स्क्रीन पर कंटेंट लिखने के लिए किया जाता है जैसे ही उस कंटेंट की जरूरत होती है। इसका मतलब यह है कि यह कहीं भी होता है, या तो जावास्क्रिप्ट फ़ाइल में या HTML फ़ाइल में स्क्रिप्ट टैग के अंदर। स्क्रिप्ट टैग के साथ ऐसी HTML फ़ाइल के भीतर कहीं भी रखा जा रहा है, यह एक बुरा विचार है। यह स्क्रिप्ट ब्लॉक के अंदर document.write () स्टेटमेंट है जो एक वेब पेज के अंदर HTML के साथ intertwined हैं।
b) प्रतिपादन
सामान्य रूप से डिज़ाइन किया गया कोड किसी भी गतिशील रूप से उत्पन्न सामग्री को ले जाएगा, इसे मेमोरी में स्टोर करें, इसे हेरफेर करते रहें क्योंकि यह कोड से गुजरता है इससे पहले कि यह स्क्रीन पर बाहर थूकता है। तो पूर्ववर्ती खंड में अंतिम बिंदु को दोहराने के लिए, अंतर्वस्तु को रेंडर करना अन्य सामग्री की तुलना में तेजी से प्रस्तुत करना हो सकता है, जिस पर भरोसा किया जा सकता है, लेकिन यह अन्य कोड के लिए उपलब्ध नहीं हो सकता है कि बदले में प्रसंस्करण के लिए सामग्री प्रदान करने की आवश्यकता होती है। इस दुविधा को हल करने के लिए हमें डॉक्यूमेंट से छुटकारा पाना होगा () और इसे सही तरीके से लागू करना होगा।
ग) असंभव हेरफेर
एक बार जब यह लिखा जाता है तो यह हो जाता है और खत्म हो जाता है। हम डोम में दोहन के बिना इसे हेरफेर करने के लिए वापस नहीं जा सकते।
मुझे नहीं लगता कि document.write का उपयोग करना एक बुरा व्यवहार है। सरल शब्दों में यह अनुभवहीन लोगों के लिए एक उच्च वोल्टेज की तरह है। यदि आप इसे गलत तरीके से उपयोग करते हैं, तो आप पकाते हैं। कई डेवलपर्स हैं जिन्होंने कम से कम एक बार इस और अन्य खतरनाक तरीकों का इस्तेमाल किया है, और वे वास्तव में कभी भी अपनी असफलताओं में नहीं खोदते हैं। इसके बजाय, जब कुछ गलत होता है, तो वे जमानत देते हैं, और कुछ सुरक्षित उपयोग करते हैं। वे हैं जो इस तरह के बयान देते हैं जिन्हें "बुरा अभ्यास" माना जाता है।
यह एक हार्ड ड्राइव को फ़ॉर्मेट करने जैसा है, जब आपको केवल कुछ फ़ाइलों को हटाने की आवश्यकता होती है और फिर "फ़ॉर्मेटिंग ड्राइव एक बुरा अभ्यास" होता है।
मुझे लगता है कि सबसे बड़ी समस्या यह है कि दस्तावेज़ के माध्यम से लिखे गए किसी भी तत्व को पृष्ठ के तत्वों के अंत में जोड़ा जाता है। यह शायद ही कभी आधुनिक पेज लेआउट और AJAX के साथ वांछित प्रभाव है। (आपको यह ध्यान रखना होगा कि DOM में तत्व सामयिक हैं, और जब स्क्रिप्ट चलती है तो इसका व्यवहार प्रभावित हो सकता है)।
पृष्ठ पर प्लेसहोल्डर तत्व सेट करना बेहतर है, और फिर इसे आंतरिक HTML में हेरफेर करना है।