admin管理员组

文章数量:1315305

In React I am trying to dynamically add a <script> to <head> when a specific ponent loads. I have previously used this code to similar things (with much simpler scripts):

ponentWillMount() {
    var script= document.createElement('script');
    script.src = "SOME_URL";
    document.body.appendChild(script);
}

But the code I am now trying to inject into head contains minified js (it is Google Analytics Content Experiment code), like this:

<!-- Google Analytics Content Experiment code -->
<script>function utmx_section(){}function utmx(){}(function(){var
k='XXXXXXXXX-Y',d=document,l=d.location,c=d.cookie;
if(l.search.indexOf('utm_expid='+k)>0)return;
function f(n){if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.
indexOf(';',i);return escape(c.substring(i+n.length+1,j<0?c.
length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;d.write(
'<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl':
'://www')+'.google-analytics/ga_exp.js?'+'utmxkey='+k+
'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().
valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"><\/sc'+'ript>')})();
</script><script>utmx('url','A/B');</script>
<!-- End of Google Analytics Content Experiment code -->

How can I dynamically inject that into <head>?

Update: I ended up using their client-side solution.

In React I am trying to dynamically add a <script> to <head> when a specific ponent loads. I have previously used this code to similar things (with much simpler scripts):

ponentWillMount() {
    var script= document.createElement('script');
    script.src = "SOME_URL";
    document.body.appendChild(script);
}

But the code I am now trying to inject into head contains minified js (it is Google Analytics Content Experiment code), like this:

<!-- Google Analytics Content Experiment code -->
<script>function utmx_section(){}function utmx(){}(function(){var
k='XXXXXXXXX-Y',d=document,l=d.location,c=d.cookie;
if(l.search.indexOf('utm_expid='+k)>0)return;
function f(n){if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.
indexOf(';',i);return escape(c.substring(i+n.length+1,j<0?c.
length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;d.write(
'<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl':
'://www')+'.google-analytics./ga_exp.js?'+'utmxkey='+k+
'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().
valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"><\/sc'+'ript>')})();
</script><script>utmx('url','A/B');</script>
<!-- End of Google Analytics Content Experiment code -->

How can I dynamically inject that into <head>?

Update: I ended up using their client-side solution.

  • javascript
  • reactjs
Share Improve this question edited Mar 3, 2017 at 13:42 allegutta asked Feb 27, 2017 at 16:04 alleguttaallegutta 5,64411 gold badges40 silver badges58 bronze badges 6
  • Possible duplicate of stackoverflow./questions/3267485/… – helb Commented Feb 27, 2017 at 16:06
  • If I can use appendChild, how could I put the whole minified js into one string (since it contains both " and ')? – allegutta Commented Feb 27, 2017 at 16:20
  • 3 Do you really need to inject that script dynamically? Why not just include it in your HTML template? – Aaron Beall Commented Feb 27, 2017 at 16:40
  • When wrapping the whole minified js into " (using \" on the " that is inside the minified js), I get this error: SyntaxError: Unterminated string constant, any idea why? – allegutta Commented Feb 27, 2017 at 16:42
  • @Aaron Good question. If I place the script directly in the <head> (in index.html), it will redirect 50% of the users to the B-test directly from /. But I only want to redirect them when they are entering /this – allegutta Commented Feb 27, 2017 at 16:47
 |  Show 1 more ment

1 Answer 1

Reset to default 6

if you want to add a script tag with src attribute to head you should use

var script= document.createElement('script');
script.src = "SOME_URL";
document.head.appendChild(script);

note document.head, not body

if you want to add a script tag with some script inside, use

var script= document.createElement('script');
script.text = "CODE";
document.head.appendChild(script);

if you just need to run this code on your page you can use eval("CODE"); where code is your js code without script tags

maybe this tool can help with escaping

本文标签： javascriptDynamically inject script into ltheadgtStack Overflow

版权声明：本文标题：javascript - Dynamically inject script into &lt;head&gt;? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741977747a2408222.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。