जावास्क्रिप्ट या jQuery

साथ क्रोम बदलें टैब रंग क्रोम में आप मेटा टैबजावास्क्रिप्ट या jQuery

<meta name="theme-color" content="#FFA000">

मेरी वेबसाइट में के साथ एक टैब के रंग सेट कर सकते हैं मैं कई वर्गों रंग कोडित है। इसे बेहतर दिखने के लिए, मैं वर्तमान में खोले गए अनुभाग के अनुसार टैब के रंग को गतिशील रूप से बदलना चाहता हूं। मैंने jQuery के साथ ऐसा करने का प्रयास किया है:

$("meta[name='theme-color']").attr('content', '#455A64');

लेकिन यह काम नहीं करता है। अगर कोई मुझे बता सकता है कि रनटाइम के दौरान आप इस मेटा वैल्यू को कैसे बदल सकते हैं तो मुझे बहुत खुशी होगी।

संपादित करें: कुछ चेक के बाद मैंने देखा कि कोड मेटा टैग सामग्री को बदलता है, लेकिन क्रोम टैब रंग अपडेट नहीं करता है।

स्रोत

2015-08-28 Sir_baaron

वाह, पहले 'विषय-color' की प्रतिक्रिया नहीं मिली है (और मुझे एक सेकंड ले लिया महसूस करने के लिए आप बात कर रहे हैं के बारे में * एंड्रॉइड * क्रोम)। – Jeroen

मैंने स्थानीय रूप से परीक्षण किया है, लेकिन आपके द्वारा पोस्ट किया गया कोड काम करता है जैसा आप उम्मीद करते हैं। आपको अधिक जानकारी जोड़नी होगी ताकि हम आपकी समस्या का पुनरुत्पादन कर सकें। – Jeroen

जैसा कि मैंने अपने उत्तर के साथ हाइलाइट करने का प्रयास किया है, पोस्ट किए गए कोड को काम करना चाहिए। आपके संपादन को देखते हुए आपको अभी भी प्रभाव प्राप्त करने में परेशानी है। क्या आप अपने डिवाइस पर जांच सकते हैं यदि मेरे उत्तर से plnkr लिंक आपके लिए काम करता है? यदि ऐसा होता है, तो शायद आपके कोड/ऐप के लिए कुछ विशिष्ट है जो समस्याओं का कारण बनता है। यदि ऐसा नहीं होता है, तो आपको अपने डिवाइस के विवरण और क्रोम/एंड्रॉइड संस्करणों को शामिल करने की आवश्यकता हो सकती है, क्योंकि मुझे संदेह होगा कि अपराधी बनना होगा। – Jeroen

आपका jQuery कोड सही है। आप शीर्षक पट्टी झिलमिलाहट और अपने उपयोगकर्ताओं को दूर भगाने चाहते हैं, इस प्रयास करें:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Unicorns!</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
    <meta name="theme-color" content="#FF0000">  
</head> 
<body> 
    <h1>Unicorns are <b id="x">#FF0000</b></h1> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
     $(function() { 
      var i = 0; 
      var colors = ["#FF0000", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF"]; 
      setInterval(function() { 
       var color = colors[i = i++ > 4 ? 0 : i]; 
       $("meta[name='theme-color']").attr('content', color); 
       $("#x").text(color); 
      }, 500); 
     }); 
    </script> 
</body> 
</html>

मैं अपने नेक्सस 5 क्रोम 40.0.2214.89 और Android संस्करण 5.1.1 के साथ यह परीक्षण किया है, और यह काम देखा। सुनिश्चित नहीं है कि इस प्रकार की सुविधा के बारे में क्या सोचना है ...: पी

सभी बेवकूफ उपकरण आपको प्रभाव दिखाने की अनुमति नहीं देंगे, क्योंकि मुझे लगता है कि iframes का उपयोग आपको इसे ठीक से पुन: उत्पन्न करने से रोक सकता है। मैंने पाया है कि Plnkr हालांकि काम किया था। this demo Plnkr पर जाकर उपरोक्त डिवाइस पर प्रभाव दिखाया गया।

स्रोत

2015-08-28 11:37:29 Jeroen

अच्छा, पता चला है, यह क्रोम संस्करण 44.x में काम नहीं करता है I संस्करण 3 में डाउनग्रेड किया गया है और अब यह सही काम करता है! –

बाहर निकलता है, यह एंड्रॉइड क्रोम संस्करण 43.x & 44.x के साथ काम नहीं करता है। अन्य संस्करणों में उपरोक्त सभी कोड काम करता है। संस्करण 45.x में यह एक रंग से दूसरे रंग तक भी फीका है, जिससे यह वास्तव में अच्छा दिखता है!

स्रोत

2015-09-05 20:10:28

इस जिन्होंने गूगल से इस पृष्ठ पर आते हैं एक वेनिला जे एस समाधान की तलाश के लिए:

document.querySelector('meta[name="theme-color"]').setAttribute('content', '#123456');

स्रोत

2018-02-13 20:15:45 WyriHaximus

जावास्क्रिप्ट या jQuery

उत्तर

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