为啥在运行时添加 <script> 标签不会加载 javascript 文件？ （使用 react.js）

Posted 2023-02-21

【中文标题】为啥在运行时添加 <script> 标签不会加载 javascript 文件？ （使用 react.js）

【英文标题】：Why adding a <script> tag at runtime doesn't load the javascript file? (with react.js)为什么在运行时添加 <script> 标签不会加载 javascript 文件？ （使用 react.js）

【发布时间】：2014-04-28 18:37:08

【问题描述】：

我有这个 react.js 脚本，它将以下代码添加到 html 中

// returned by the render method
React.DOM.div(
    dangerouslySetInnerHTML:  
        __html: '<script type="text/javascript" async="" src="//myapp.disqus.com/embed.js"></script>'
    
)

现在我的 html 看起来像：

<script type="text/javascript" async="" src="//myapp.disqus.com/embed.js"></script>

这看起来很完美，但问题是它没有加载脚本。 script 标签被插入到 body 的中间，嵌套在其他一些 div 标签中。

可能是什么问题？ 谢谢

【问题讨论】：

相关页面对我没有帮助，因为我正在加载外部文件。我将如何对其进行评估？

@user3446254，向下滚动一点 :-) ***.com/a/7054216/1074592

React.js 中的脏解决方案class XScript extends React.Component static initScripts(el, url) var script = document.createElement('script') script.setAttribute('type', 'text/javascript'); script.setAttribute('src', url); el.appendChild(script); componentDidMount() XScript.initScripts(React.findDOMNode(this.refs['it']), this.props.url); render() return <div ref="it" dangerouslySetInnerHTML=__html: '<script type="text/javascript" src="'+this.props.url+'"></script>'></div>

这不应被标记为重复，因为它特定于 ReactJS - 其他答案在 ReactJS 中不起作用

希望这可以重新打开。

【参考方案1】：

您测试了哪种浏览器？如果您在脚本标签中使用 async="true"，它不会阻塞。但目前只有几个浏览器支持。

【讨论】：

问题不在于阻塞与否，问题在于根本没有请求文件。

您解决了吗？我对 reactjs 有同样的问题

【参考方案2】：

使用 react 将脚本标签呈现到页面不是正确的解决方案 - 我无法让它与 JSX 一起使用，我假设这里同样适用。不知道为什么，但只需以普通的旧 javascript 方式添加它：

    var script = document.createElement("script");

    script.src = "//myapp.disqus.com/embed.js";
    script.async = true;

    document.body.appendChild(script);

将它放在根组件的 componentWillMount 中。

【参考方案3】：

我昨天刚刚将 Disqus 添加到我的 React 应用程序中。我使用了“react-disqus-thread”模块并立即启动并运行它。

在github上：https://github.com/mzabriskie/react-disqus-thread

和 npm：https://www.npmjs.com/package/react-disqus-thread

该组件采用以下道具：

短名称 - 这是 //myapp.disqus.com/embed.js 中的“myapp” 标识符 - 一个唯一的 blogId，可以在 url 更改时识别您的博客文章 标题 url - 如果你不提供这个，模块会检测到这个url并提供它。