react项目在页面插入script标签，引入file.min.js

已于 2022-04-20 14:00:22 修改
阅读量2.3k 收藏 2
点赞数
分类专栏： html 文章标签： react javascript html
于 2022-04-20 13:56:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012149637/article/details/124295758
版权

现在有一个需求，需要在登录后往页面的head插入script标签，src路径是网关那边给的一个*.min.js文件，同时还指定了一些属性，比如

<script type="text/javascript" src="spa.min.js?uid=b8f1a743-d7f5-4687-a8a4-b34b05203eba&amp;cid=5f3e36149fa95c0414408ad4" id="_clouddeep" data-token="9a6e1cc9-2a1e-4da9-be5b-5d6be7d3fea6" data-marktext="示例文字" data-markcolor="#dcdcdc" data-marksize="24"></script>

不仅有id、src属性，还有一些自定义的比如：data-token、data-marktext等属性，经过一番百度最终以下代码可以正常运行

先创建一个element，通过setAttribute，设置好它的值，然后append就可以了，亲测可以执行

小刘小刘可爱一流zz
关注
专栏目录
react教程 (通过script引入)
weixin_30596735的博客
11-22 3233
1、React 入门实例教程 ：http://www.ruanyifeng.com/blog/2015/03/react.html（阮一峰的博客） 或 https://segmentfault.com/a/1190000012921279（作为阅读参考） <!DOCTYPE html> <html> <head> &l...
React中引入外部js的方法
热门推荐
白起的博客
03-02 1万+
使用插件react-load-script，如果没有安装可以使用yarn add react-load-script 或者 npm install react-load-script，看你使用哪个包管理工具。 然后你就可以像使用React组件那样插入JS，如下代码。 import React from 'react'; import Script from 'react-load-script';...
react组件内引入其他外部js
sunzhen15896的博客
04-22 3783
import './app/lib-generate-test-usersig.min.js'; const generator: any = new LibGenerateTestUserSig(sdkAppId, SECRETKEY, EXPIRETIME); const userSig = generator.genTestUserSig(userId);
react-loadscript:脚本标签作为React组件
05-16
React负荷脚本 npm install react react-loadscript --save 脚本加载作为组件 （我很抱歉） import { Script } from 'react-loadscript' ; class App { render ( ) { return < Script src = 'https://code.jquery.com/jquery-2.1.4.min.js' > { ( { done } ) => ! done ? < div> loading... < / div > : < div> { $ . map ( [ 1 , 2 , 3 ] , i => < div> { i * 5 } < / div > ) } < / div > } < / Script >
React页面插入script
weixin_30764883的博客
12-24 823
项目中遇到插入广告的需要，而广告的信息只是一个url链接，这个链接返回的时一个js，和以前插入广告有点不同。所有找了很多方式。 先来展示广告链接返回的信息： 假设广告链接为：http://192.168.1.1:8081/advert/getAdvert?flowerId=1987&advertType=2 链接返回的信息，目的是在指定位置插入广告元素div节点： (funct...
在React中引入多个script标签，并同步执行
火星基地
07-07 6917
1. 前言 最近在用React写一个小项目时，遇到了这样的需求： 在某个组件中引入外部js文件，也就是引用一个或多个script标签。这些script标签仅供某个组件使用，所以不想在html页面中直接引进来，想就在相应的React的函数组件中引入，查阅了相关资料，找到了以下可行办法。 2. 动态创建script标签并执行 在组件挂载时，动态创建script标签，并设置标签的src属性，若不是外部文件，还可以设置innerHTML，然后追加到body标签的最下面。 在组件即将卸载时，移除这个标签。 ❗❗❗注意
script标签如何实现异步加载_React中异步引入script标签
weixin_39522408的博客
11-26 523
React中支持异步加载script，通过react-loadable可以在React中异步import。但是目前遇到一个问题，引入全局的script标签(不支持CommonJS方式导入)。但是如果把所有标签全部写在index.html中的话，那么第一页加载的速度会变慢，所以希望实现异步引入script标签的方法。目前通过document.createElement的方法来动态创建脚本标签，然后通...
React 从零开始学习（二）—— JSX
且听风吟的博客
07-12 1492
React 从零开始学习（二）—— 新建页面
React 16.x折腾记 - (5) 记录用React开发项目过程遇到的问题(Webpack4/React16/antd等)
CRPER
10-29 3552
前言 自己搭的脚手架,坑都是一步一步踩完的; 技术栈: react@16.6.0/ react-router-dom@v4 / webpack^4.23.1(babel7+) 闲话不多说,直入主题,有兴趣的可以瞧瞧,没兴趣的止步,节约您的时间. 问题列表 问题一:history模式下,接口和请求冲突的问题 就是反向映射接口和请求的根路径重叠,如下: proxy: { ...
react引入js文件
Sunraiseprice的博客
11-14 1788
Bpmn.js详细入门，创建节点，删除节点（章节一）
最新发布
xye1230的博客
07-04 1497
前言首先这玩意没有一个标准的中文官方文档，英文的也没有，英文只有一个官方的各种案例，所以需要学习全面，还是得去官网的案例里面找因为我在学这个的时候，网上搜到的很多信息都已经很老了，导致组件在使用过程中很多写法不对，甚至引入路径都找不到，所以我还是决定写一个相对新一点的，这里就给大家入个门，讲一些基本使用，以及我个人在过程中遇到的东西，希望能帮到你这里是官网案例链接。
react中插入script标签
sinat_38728634的博客
05-29 3168
生成结果：
01-使用Script标签的形式实现HelloReact
魏大大
12-06 736
创建第一个React应用，并在页面上显示“Hello React”字样。本文致力于使用标签的方式，实现最基础的React应用。编写React应用时，至少需要引入以上三个JS库，其中，是React的核心库，属于扩展库，用于操作DOM，可以将ES6语法转为ES5，同时支持JSX转为JS。在文件的前以形式引入以上三个JS库。注意：标签引入React相关JS库时，需要先引入React核心库（＊）！ 也可以使用CDN方式引入，避免下载React相关文件。 3. 编写React代码 React容器React会将所有
React中异步引入script标签
AndyQsmart的专栏
09-16 6205
公众号：程序员波波 React中支持异步加载script，通过react-loadable可以在React中异步import。 但是目前遇到一个问题，引入全局的script标签。但是如果把所有标签全部写在index.html中的话，那么第一页加载的速度会变慢，所以希望实现异步引入script标签的方法。 目前通过document.createElement的方法来动态创建脚本标签，然后通...
React中同步引入script标签
AndyQsmart的专栏
09-16 6803
公众号：程序员波波 之前写了一篇异步引入的博客，但是在开发中遇到，可能某些js之间有调用关系，那么引入的时候就需要按照一定的顺序进行同步引入。 这里采用了递归的方式： class Tools { static loadScript(url, callback) { let old_script = document.getElementById(url)...
react基本引入文件
08-04
里面有五个文件，如果用的是react15版本的就引入react.min.js，react-dom.min.js,browser.min.js;要是用react16版本的就引入react.production.min.js，react-dom.production.min.js,dom.min.js,browser.min.js三个文件
react当前页面插入外部script
sunzhen15896的博客
01-25 1027
componentDidMount() { const script = document.createElement("script"); script.src = "/scripts/xxx.js"; script.async = true; document.body.appendChild(script); }
webpack搭建react项目步骤实现
m0_48164934的博客
07-13 642
文章目录 提示：本文篇幅较长，请耐心看完哦~ 本篇文章是介绍基于React和webpack搭建的一套完整项目流程，开始吧。 文章目录文章目录前言一、项目创建1.全局安装react2.本地新建react项目文件二、安装相关组件1.安装react, react-dom, webpack2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面
为react动态添加script标签并执行
qq_36777191的博客
04-02 4119
如果在componentWillMount中插入，只能指定root，因为此时页面还没有渲染出来，找不到append元素，需要在指定位置渲染，就要在componentDidMount中此时元素已经渲染完成，在项目中直接用了hooks,效果一样 useEffect(()=>{ let script2 = document.createElement('script'); script2.type = 'text/javascript'; script.
React基础
qq_45555892的博客
02-16 1058
react 1.React基本用法、脚手架、JSX React安装命令: npm i react react-dom react 包是核心，提供创建元素，组件等功能 react-dom 包提供DOM相关功能 React基本使用 //一.引入react和react-dom的两个js文件 <script src="./node_modules/react/umd/react.developm...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值