如何解决如何在响应中正确运行第三方脚本?
我需要在React应用程序中添加以bitrix进行的支持聊天-这是一个脚本,通常会添加到index.html文件中。 示例脚本:
<script>
(function(w,d,u){
var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.Now()/60000|0);
var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
})(window,document,'https://someurl.js');
</script>
此刻,我已经实现了如下连接: 用脚本创建了一个组件
import React,{ Component } from 'react'
export default class Script extends Component {
componentDidMount() {
const s = document.createElement('script')
// s.type = 'text/javascript'
s.async = true
s.innerHTML = "document.write('This is output by document.write()!')"
s.src =
'https://someurl.js' +
'?' +
((Date.Now() / 60000) | 0)
this.instance.appendChild(s)
const h = document.getElementsByTagName('script')[0]
h.parentNode.insertBefore(s,h)
}
render() {
return <div ref={(el) => (this.instance = el)} />
}
}
并将其连接到应用程序的根目录
import Script from './Script '
const App = () => {
return(
<>
<App />
<Script />
</>
)
}
它有效,但是我认为这种解决方案不是最正确的解决方案。如果有人可以帮助在响应式应用程序(react,vue)中正确运行外部脚本,我将不胜感激。 预先感谢!
解决方法
将其放在index.html中是很好的方法,也是最合规的方法。
不这样做的唯一原因是:
- 嵌入脚本是有条件的-它取决于您仅在React / Vue / etc等基础上才知道的内容。应用正在运行。或者您想延迟嵌入。
- 您正在将诸如Promise之类的内容挂接到脚本的加载中,例如检查Bitrix聊天何时启动并运行
- 您需要传递仅React / Vue / etc已知的值。 app嵌入脚本(例如api键)
由于这些似乎都不存在,因此我将其保留在index.html中。
,我记得有一个名为hazardantSetInnerHTML的属性,您可以在React官方网站上查找。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。