Jquery / जावास्क्रिप्ट के माध्यम से <head> में कुछ भी कैसे जोड़ा जाए?

102

मैं एक सीएमएस के साथ काम कर रहा हूं, जो <head>तत्व के लिए HTML स्रोत को संपादित करने से रोकता है।

उदाहरण के लिए मैं <title>टैग के ऊपर निम्नलिखित जोड़ना चाहता हूं :

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

— जितेन्द्र व्यास
स्रोत

8

यह सार नहीं करता है ... जावास्क्रिप्ट के निष्पादन से पहले सिर को पार्स किया जाता है। जावास्क्रिप्ट के माध्यम से सिर में मेटा स्टफ जोड़ना वांछित प्रभाव नहीं होगा।

— आंद्रे हैवरडिंग्स

1

@ मिकेल - हाँ। सभी सवालों के जवाब मुझे मदद करते हैं

— जितेंद्र व्यास

2

जबकि सीएमएस प्रश्न से संबंधित नहीं है, यह कुछ परिस्थितियों में मेटा टैग जोड़ने के लिए समझ में आता है। विभिन्न ब्राउज़र ऐडऑन और जावास्क्रिप्ट इंजेक्शन हैं जो जानकारी इकट्ठा करने के लिए मेटा टैग में डेटा का उपयोग करते हैं। फेसबुक का ओपनग्राफ इसका एक उदाहरण है। मेटा टैग्स को सिर में इंजेक्ट करने की आवश्यकता तब होती है जब आपके पास ओरिजिनल HTML की सीधी पहुँच नहीं होती है, चाहे सीएमएस की गलती से या क्योंकि आप एक जावास्क्रिप्ट ऐडऑन / इंजेक्शन खुद लिख रहे हों।

— अवधारणाडैग

ध्यान दें कि यह संभव है कि <meta>टैग को गतिशील रूप से जोड़ने का कोई प्रभाव नहीं होगा, जो इस बात पर निर्भर करता है कि वे क्या हैं और क्या ब्राउज़र शामिल है।

— नुकीले

अच्छी बात है, ऐसा तब होता है जब कोई समस्या पर बहुत अधिक ध्यान केंद्रित करता है ;-)

— mb897038

149

आप इसे चुन सकते हैं और इसे सामान्य रूप से जोड़ सकते हैं:

$('head').append('<link />');

— nickf
स्रोत

2

मैं आदेश को कैसे नियंत्रित कर सकता हूं, जहां यह लिंक रखा जाएगा

— जितेंद्र व्यास

7

प्रलेखन पढ़ें: docs.jquery.com/Manipulation insertBefore , insertAfterवह है जो आप चाहते हैं।

— nickf

3

मैंने यह डॉक्यूमेंट में डाल दिया है। पहले से ही, लेकिन यह मेरे सिर की सामग्री के लिए

— अपील

यह लिंक जोड़ रहा है, लेकिन पेज के दृश्य में लिंक नहीं दिख रहा है स्रोत ... मैं इसे फायरबग जैसे ब्राउज़र डेवलपमेंट टूल्स से देख सकता हूं। क्या मैं दृश्य स्रोत में भी लिंक देख सकता हूं?

— पंकज तिवारी

4

@PankajTiwari आप इसे स्रोत दृश्य में नहीं देखेंगे क्योंकि कोड इसे वर्तमान दस्तावेज़ में जोड़ता है, न कि मूल स्रोत (जो सर्वर द्वारा प्रदान किया गया था)। यही कारण है कि FireBug और Chrome देव टूल इतने उपयोगी हैं।

— बर्नहार्ड हॉफमैन

129

जावास्क्रिप्ट:

document.getElementsByTagName('head')[0].appendChild( ... );

डोम तत्व को ऐसे बनाएं:

link=document.createElement('link');
link.href='href';
link.rel='rel';

document.getElementsByTagName('head')[0].appendChild(link);

— जोशुआ वुडवर्ड
स्रोत

1

स्क्रिप्ट तत्वों के साथ काम करता है!

— रे फॉस

26

jQuery

$('head').append( ... );

जावास्क्रिप्ट:

document.getElementsByTagName('head')[0].appendChild( ... );

— डेविड हेडलंड
स्रोत

5

एक केंद्र तत्व की आवश्यकता नहीं है? अर्थात। var elem = document.createElement () document.getElementsByTagName ('हेड' [[0] .appendChild (elem);

— फ्रेड्रिक

2

सही है। मैंने उस हिस्से को सिर्फ इसलिए छोड़ दिया ...क्योंकि मुझे नहीं लगा कि यह सवाल का एक केंद्रीय हिस्सा था, और यह भी, कि लेखन के समय, उदाहरण के लिए कोई ऐसा हाथ नहीं था जो वह सिर में रखना चाहता था। लेकिन हाँ, यह एक DOM-element होने की आवश्यकता है।

— डेविड हेडलंड

10

आप innerHTMLअतिरिक्त फ़ील्ड स्ट्रिंग को संक्षिप्त करने के लिए उपयोग कर सकते हैं ;

document.head.innerHTML = document.head.innerHTML + '<link rel="stylesheet>...'

हालाँकि, आप गारंटी नहीं दे सकते हैं कि आप जो अतिरिक्त चीज़ें सिर से जोड़ते हैं, उन्हें पहले लोड के बाद ब्राउज़र द्वारा पहचाना जाएगा, और यह संभव है कि अतिरिक्त स्टाइलशीट लोड होते ही आपको एक FOUC (अस्थिर सामग्री का फ्लैश) मिल जाएगा।

मैंने वर्षों में एपीआई को नहीं देखा है, लेकिन आप इसका उपयोग भी कर सकते हैं document.write, जो कि इस तरह की कार्रवाई के लिए डिज़ाइन किया गया था। हालाँकि, इसके लिए आपको पेज को तब तक ब्लॉक करने की आवश्यकता होगी जब तक कि आपका प्रारंभिक AJAX अनुरोध पूरा नहीं हो जाता।

— Jivings
स्रोत

9

नवीनतम ब्राउज़रों (IE9 +) में आप document.head का भी उपयोग कर सकते हैं :

उदाहरण:

var favicon = document.createElement('link');
favicon.id = 'myFavicon';
favicon.rel = 'shortcut icon';
favicon.href = 'http://www.test.com/my-favicon.ico';

document.head.appendChild(favicon);

— बेनी न्युगबॉएर
स्रोत

9

एक अस्थायी तत्व बनाएं (ई। जी। DIV), अपनी innerHTMLसंपत्ति के लिए अपना HTML कोड असाइन करें , और फिर अपने बच्चे के नोड्स को HEADएक के बाद एक तत्व में जोड़ें । उदाहरण के लिए, इस तरह:

var temp = document.createElement('div');

temp.innerHTML = '<link rel="stylesheet" href="example.css" />'
               + '<script src="foobar.js"><\/script> ';

var head = document.head;

while (temp.firstChild) {
    head.appendChild(temp.firstChild);
}

HEADइसके माध्यम से पूरी सामग्री को फिर से लिखने की तुलना में innerHTML, यह तत्व के मौजूदा बाल तत्वों को HEADकिसी भी तरह से प्रभावित नहीं करेगा ।

ध्यान दें कि इस तरह से डाली गई स्क्रिप्ट स्पष्ट रूप से स्वचालित रूप से निष्पादित नहीं होती हैं, जबकि शैलियों को सफलतापूर्वक लागू किया जाता है। इसलिए यदि आपको स्क्रिप्ट निष्पादित करने की आवश्यकता है, तो आपको जेएस फाइलों को अजाक्स का उपयोग करके लोड करना चाहिए और फिर उनकी सामग्री का उपयोग करके निष्पादित करना चाहिए eval()।

— मरत तनालिन
स्रोत

यह है कि मैं इसे कैसे करता हूं body, लेकिन क्या यह वास्तव में head-tag के अंदर किया जा सकता है ? मैं धारणा है कि केवल अनुमति टैग जहां के तहत किया गया base, link, meta, title, styleऔर script?

— mb897038

AFAICT, आपके पास आपके अजाक्स प्रतिक्रिया में ठीक वही तत्व हैं। क्या तुम नहीं?

— मराट तानलिन

वास्तव में, लेकिन मैं अभी भी सिर टैग के अंदर एक div के साथ काम नहीं कर सकता। ऐसा लगता है कि क्रोम "स्मार्ट" है जो शरीर में किसी भी तरह से div की सामग्री को प्रदर्शित करने के लिए पर्याप्त है।

— mb897038

2

आपने शायद उत्तर को ध्यान से नहीं पढ़ा है। ;-) DIVतत्व के प्रयोजन के लिए सिर्फ़ एक अस्थायी कंटेनर है एचटीएमएल कोड को पार्स । आप सम्मिलित नहीं किया जाना चाहिए DIVकरने के लिए ही HEAD। आपको इसके चाइल्ड नोड्स डालने चाहिए । कृपया वह उदाहरण देखें जो मैंने उत्तर में जोड़ा है।

— मराट तानलिन

1

@GaetanL। "जबकि तत्व के अंदर बाल tempतत्व हैं।" Node.firstChild () डॉक्स देखें ।

— मराट तानलिन

4

एक जावास्क्रिप्ट शुद्ध कोशिश करें:

लाइब्रेरी जेएस:

appendHtml = function(element, html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    while (div.children.length > 0) {
        element.appendChild(div.children[0]);
    }
}

प्रकार: appendHtml(document.head, '<link rel="stylesheet" type="text/css" href="http://example.com/example.css"/>');

या jQuery:

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'http://example.com/example.css'));

— KingRider
स्रोत

-5

Jquery के साथ आपके पास अन्य विकल्प हैं:

$('head').html($('head').html() + '...');

वैसे भी यह काम कर रहा है। जावास्क्रिप्ट विकल्प दूसरों ने कहा, यह भी सही है।

— डेव
स्रोत

2

यह मौजूदा सामग्री को हटा देगा और नए तत्व उत्पन्न करेगा। यह अवांछनीय दुष्प्रभाव हो सकता है जैसे कि गतिशील रूप से DOM गुण सेट करना और स्क्रिप्ट को फिर से निष्पादित करना।

— क्वेंटिन

इस कारण से आपको $ ('हेड') से पहले उपयोग करना चाहिए। html () सभी DOM प्रॉपर्टी को रिकवर करने के लिए

— डेव

1

उपयोग .html()करने से सभी DOM गुण ठीक नहीं होंगे । (इस समस्या का सबसे आम उदाहरण, और सबसे अधिक दिखाई देने वाला, समान फ़ील्ड्स को नए फ़ील्ड्स को प्रपत्र में जोड़ने के लिए उपयोग करते समय है। मान विशेषता किसी फ़ील्ड के डिफ़ॉल्ट मान का प्रतिनिधित्व करती है, इसलिए html()इसे प्राप्त करना और फिर इसे सेट करना सभी मौजूदा को रीसेट कर देगा। उनके डिफ़ॉल्ट मानों पर फ़ील्ड)।

— क्वेंटिन

मुझे यकीन है कि आपने इसे अपने कोड में परीक्षण किया है और यह काम कर रहा है और सभी डोम गुण काम करता है। कृपया, अपने आप को परखें, मैं IE11

— डेव

जिन चीजों को हटाया जा सकता है, वे घटनाएँ भी हैं।

— हाइड्रोपर