मेरे पास एक रिएक्ट ऐप है जहां मैं उपयोगकर्ता को <script> टैग को HTML हेडर के रूप में जोड़ने के लिए निर्दिष्ट करने की अनुमति देता हूं। दस्तावेज़ लोड होने के बाद इन्हें प्राप्त किया जाता है, और सादे पाठ गुणों के रूप में संग्रहीत किया जाता है (मैं केवल <script src="//some-location... को इंगित नहीं कर सकता क्योंकि यह एक स्ट्रिंग है, फ़ाइल नहीं)। मैंने कई चीजों की कोशिश की है लेकिन कुछ भी काम नहीं कर रहा है।
let json = loadDataFromServer();
console.log(json.headerHTML); // prints <script type="text/javascript">alert("Header script working");</script>
// This just appends it as a string to the header.
document.getElementsByTagName("head")[0].append(json.headerHTML);
// This appends the script tags properly, but doesn't run the script.
document.head.innerHTML = document.head.innerHTML + json.headerHTML;
यह उल्लेखनीय हो सकता है कि यह एक रिएक्ट ऐप का हिस्सा है, लेकिन जहां तक मुझे पता है dangerouslySetInnerHTML() हेडर में इस्तेमाल नहीं किया जा सकता, केवल बॉडी एचटीएमएल।
2 जवाब
react-helmet इसे हासिल करने में मदद कर सकता है। आप सर्वर की प्रतिक्रिया से ओपनिंग और क्लोजिंग script टैग को हटा सकते हैं और हेडर सामग्री को नीचे दिखाए अनुसार जोड़ सकते हैं।
import {Helmet) from 'react-helmet'
...
return (
<>
<Helmet>
{json.headerHTML ? (
<script>
{`
${json.headerHTML}
`}
</script>
) : null}
</Helmet>
...
</>
)यह बहुत आसान है। आपको एक डोम तत्व बनाने और इसे सिर में जोड़ने की जरूरत है।
const element = document.createElement('script');
element.innerHTML += 'alert("hello");'
document.head.appendChild(element);