[英]Inserting a Custom Script in React Helmet/ Gatsby
I have this custom script that from a third party I am trying to embed into React Helmet我有这个来自第三方的自定义脚本,我试图将它嵌入到 React Helmet 中
Usually the scripts are given only as a src url.通常脚本仅作为 src url 给出。 If I am given the code below, what is the best practice to embed the embed the script with React Helmet
如果给我下面的代码,使用 React Helmet 嵌入脚本的最佳实践是什么
<script>
document.getElementsByTagName('head')[0].appendChild(function(s){
var d=document,m2g=d.createElement('script'),l=function(){Mobi2Go.load(s.container,s.ready);},jq=window.jQuery&&+window.jQuery.fn.jquery.replace(/^(\d+).*$/,'$1')===1&&+window.jQuery.fn.jquery.replace(/^\d+\.(\d+).*$/,'$1')>=7,qs=window.location.search.substring(1),re='=(.*?)(?:;|$)',c=d.cookie.match('MOBI2GO_SESSIONID'+re),w=window.innerWidth;
m2g.src='https://www.mobi2go.com/store/embed/1990-v8oL.js?'+qs+(jq?'&no_jquery':'')+(c?'&s='+c[1]:'')+'&device_width='+w;
if(m2g.onload!==undefined)m2g.onload=l;else m2g.onreadystatechange=function(){if(m2g.readyState!=='loaded'&&m2g.readyState!=='complete')return;m2g.onreadystatechange=null;l();}
window.Mobi2Go_est = +(new Date);
return m2g;
}({
container: 'Mobi2Go-Storefront', // Replace with ID of the element to inject UI into
ready: function() {} // Callback to fire when app is ready
}));
</script>
There is obviously errors if I include all of that in the React Helmet Not sure what is the best practice to make it work.如果我将所有这些都包含在 React Helmet 中,显然会出现错误。不确定使其工作的最佳实践是什么。
I have also tried placing it in the html.js file in gatsby我也试过把它放在 gatsby 的 html.js 文件中
import React from 'react';
import PropTypes from 'prop-types';
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{props.headComponents}
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
<script
dangerouslySetInnerHTML={{
__html: `
document.getElementsByTagName('head')[0].appendChild(function(s){
var d=document,m2g=d.createElement('script'),l=function(){Mobi2Go.load(s.container,s.ready);},jq=window.jQuery&&+window.jQuery.fn.jquery.replace(/^(\d+).*$/,'$1')===1&&+window.jQuery.fn.jquery.replace(/^\d+\.(\d+).*$/,'$1')>=7,qs=window.location.search.substring(1),re='=(.*?)(?:;|$)',c=d.cookie.match('MOBI2GO_SESSIONID'+re),w=window.innerWidth;
m2g.src='https://www.mobi2go.com/store/embed/1990-v8oL.js?'+qs+(jq?'&no_jquery':'')+(c?'&s='+c[1]:'')+'&device_width='+w;
if(m2g.onload!==undefined)m2g.onload=l;else m2g.onreadystatechange=function(){if(m2g.readyState!=='loaded'&&m2g.readyState!=='complete')return;m2g.onreadystatechange=null;l();}
window.Mobi2Go_est = +(new Date);
return m2g;
}({
container: 'Mobi2Go-Storefront', // Replace with ID of the element to inject UI into
ready: function() {} // Callback to fire when app is ready
})););
`,
}}
/>
</html>
);
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
};
It should work using react-helmet
, there are examples of it in the README .它应该使用
react-helmet
工作,在README中有它的例子。
You might be missing type="text/javascript"
in your script
tag:您的
script
标签中可能缺少type="text/javascript"
:
<script type="text/javascript">
// your script goes here
</script>
Al alternative option if this doesn't work for you is to customize Gatsby's html.js .如果这对您不起作用,另一种选择是自定义 Gatsby 的 html.js 。
Use the script tag inside the helmet tag.使用头盔标签内的脚本标签。 Most important your script should me inside the curly braces
最重要的是你的脚本应该在花括号内
<Helmet> <script> {`alert( 'Hello, world;' );`} </script> </Helmet>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.