我想在我的 React.js Web 应用程序中包含两种类型的广告
<script async="async" data-cfasync="false" src="//somewebstite.com/invoke.js"></script>
<div id="container-4foobarbaz"></div>
还有这个广告:
<script type="text/javascript">
atOptions = {
'key' : 'somekey',
'format' : 'iframe',
'height' : 250,
'width' : 300,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.cdnwebsite.com/invoke.js"></scr' + 'ipt>');
我如何将其包含在我的 React 应用程序中?
我尝试了一些方法,但没有一个有效,包括:
const script = document.createElement("script");
script.async = true;
script["data-cfasync"] = true;
script.src = "//somewebstite.com/invoke.js"
this.div.appendChild(script);
渲染中是这样的:
<div id="container-4foobarbaz" ref={el => (this.div = el)} >
</div>
我看到你正在尝试使用 adsTerra,所以这是一个工作示例(在 Typecript 中)
import { useEffect, useRef } from 'react'
export default function Banner(): JSX.Element {
const banner = useRef<HTMLDivElement>()
const atOptions = {
key: 'YOUR_KEY',
format: 'iframe',
height: 50,
width: 320,
params: {},
}
useEffect(() => {
if (!banner.current.firstChild) {
const conf = document.createElement('script')
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = `//www.highperformancedformats.com/${atOptions.key}/invoke.js`
conf.innerHTML = `atOptions = ${JSON.stringify(atOptions)}`
if (banner.current) {
banner.current.append(conf)
banner.current.append(script)
}
}
}, [])
return <div ref={banner}></div>
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)