Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >读取javascript script index.html公共文件夹react js中的类

读取javascript script index.html公共文件夹react js中的类
EN

Stack Overflow用户
提问于 2020-02-04 09:29:55
回答 1查看 218关注 0票数 1

我需要知道如何将index.html公共文件夹文件中的javscript脚本嵌入到react组件中。我已经在使用这个方法了,但是类还没有定义。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
componentDidMount () {
    this._loadScript('/library/es6-shim.js', false)
    this._loadScript('/library/fingerprint.sdk.min.js', true)
    this._loadScript('/library/websdk.client.bundle.min.js', false)
    var script = document.createElement('script')
    script.async = true
    script.innerHTML = "this.sdk = new Fingerprint.WebApi;"
    document.head.appendChild(script)
  }

  _loadScript = (src, type) => {
    var tag = document.createElement('script');
    tag.async = true;
    tag.src = src;
    document.head.appendChild(tag)
    // tag.onload = () => this.scriptLoaded()

    console.log('headers', document.head)
  }

我需要在组件中读取新的Fingerprint.WebApi实例。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-04 09:59:51

您应该加载所有这三个库,然后您应该可以访问全局公开的Fingerprint类。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
componentDidMount() {
  Promise.all([
      this._loadScript('/library/es6-shim.js'),
      this._loadScript('/library/fingerprint.sdk.min.js'),
      this._loadScript('/library/websdk.client.bundle.min.js')
  ])).then(() => {
    // Fingerprint should be available on the window.
    console.log(window.Fingerprint);
    const sdk = new window.Fingerprint.WebApi();
  });
}
_loadScript = (src) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('async', 'true');
    script.setAttribute('src', url);
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60054309

复制
相关文章
React多页面应用4(webpack自动化生成多入口页面)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30 4.React多页面应用4(webpack自动化生成多入口页面)----201
前端人人
2018/04/11
1.8K1
React多页面应用4(webpack自动化生成多入口页面)
React多页面应用5(webpack4 多页面自动化生成多入口文件)
本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04 2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08 3、React多页面应用3(webpack4 多页面实现)---2018.04.09 4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018
前端人人
2018/04/13
2.7K0
React多页面应用5(webpack4 多页面自动化生成多入口文件)
微前端架构实战
之前比较多的处理方式是npm包形式抽离和引用,比如多个应用项目之间,可能有某业务逻辑模块或者其他是可复用的,便抽离出来以npm包的形式进行管理和使用。但这样却带来了以下几个问题:
西岭老湿
2021/04/25
3.9K0
微前端架构实战
(24/24) webpack小案例--自己动手用webpack构建一个React的开发环境
通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧。
wfaceboss
2019/04/08
7400
(24/24) webpack小案例--自己动手用webpack构建一个React的开发环境
Webpack学习总结 【原创】
Webpack学习总结 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257 目录导航 Webpack学习总结 1. Webpack 与 Gulp / Grunt 对比 2. 安装 2.1 创建package.json文件 2.2 安装Webpack作为依赖包
CS逍遥剑仙
2018/04/28
2.4K0
React多页面应用4(webpack4 提取第三方包及公共组件)
本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04 2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08 3、React多页面应用3(webpack4 多页面实现)---2018.04.09 4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018
前端人人
2018/04/11
1.9K0
React多页面应用4(webpack4 提取第三方包及公共组件)
【译】开始学习React - 概览和演示教程
当我刚开始学习JavaScript的时候,我就听说了React,但我承认看了它一眼,它吓到我了。我看到了看起来一堆HTML和CSS的混合思想,这不是我们一直努力避免的事情吗?React有什么了不起的?
Jimmy_is_jimmy
2020/02/24
11.2K0
Webpack学习总结
WebPack : 模块化解决方案(模块打包机),能够分析项目结构,找到JavaScript模块及浏览器不能直接运行的拓展语言(Scss,TypeScript等),转换和打包为合适的格式供浏览器使用。WebPack把项目当做一个整体,通过一个给定的主文件(如:index.js)开始找到项目的所有依赖文件,使用loaders处理,最后打包为一个(或多个)浏览器可识别的JavaScript文件
csxiaoyao
2018/05/11
2.6K0
webpack配置React开发环境(上)
Webpack 是一个前端资源加载/打包工具,我们部门的一条主要技术栈就是Webpack+React+ES6+node,虽然之前自己做个人项目也接触好多次Webpack,但是自己并没有研读总结过Web
牧云云
2018/05/02
1.6K0
Webpack实战-管理多个单页应用
本文主要讲解了如何利用Webpack构建一个单页应用程序,并通过代码示例讲解了如何配置Webpack和构建单页应用程序。同时,还介绍了如何使用AutoWebPlugin插件简化Webpack配置,以及利用插件生成单页应用程序的代码。
IMWeb前端团队
2018/01/08
1.9K0
Webpack实战-管理多个单页应用
React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30 4.React多页面应用4(webpack自动化生成多入口页面)----201
前端人人
2018/04/11
1.8K1
React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)
Webpack实战-管理多个单页应用
上一节3-9为单页应用生成HTML中只生成了一个 HTML 文件,但在实际应用中一个完整的系统不会把所有的功能都做到一个网页中,因为这会导致这个网页性能不佳。 实际的做法是按照功能模块划分成多个单页应用,每个单页应用生成一个 HTML 文件。并且随着业务的发展更多的单页应用可能会逐渐被加入到项目中去。
IMWeb前端团队
2019/12/03
6120
html script 换行,JavaScript中怎么换行
js中换行的方法:1、使用【\n】换行符,代码为【alert(“第一行\n第二行”)】;2、使用【\r】换行符,代码为【alert(“第一行\r第二行”)】;3、使用HTML的【 】标签。
全栈程序员站长
2022/11/01
9.9K0
html script 换行,JavaScript中怎么换行
webpack入门指南
1. 导语 github仓库 https://github.com/Rynxiao/webpack-test 1.1 什么叫做webpack webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules. 简单的概括就是:webpack是一个模块打包工具,处理模块之间的依赖同时生成对应模块的静态资源。 1.2 web
糊糊糊糊糊了
2018/05/09
2.3K0
webpack入门指南
react打包优化【第三方库使用cdn】
对于 react、react-router、redux、axios和antd等等这些不经常改动的库、我们让webpack不对他们进行打包,通过cdn引入,可以减少代码的大小、也可以减少服务器的带宽,网站首次加载会更快。
心念
2023/01/11
2.8K0
node.js读取、拆分HTML文件中的CSS、Script、HTML模块到不同文件
代码: const fs = require('fs') const path = require('path') // 匹配style标签的正则 \s匹配所有空格;\S匹配所有非空格;*代表无限次 const regStyle = /<style>[\s\S]*<\/style>/ // 匹配script标签的正则 const regScript = /<script>[\s\S]*<\/script>/ // 读取文件 fs.readFile(path.join(__dirname, './009-
倾盖
2022/08/16
4.2K0
node.js读取、拆分HTML文件中的CSS、Script、HTML模块到不同文件
使用Webpack来做自己的cra脚手架
现如今的JavaScript已经出了ES6,ES7甚至许多更高的版本,但是有很多浏览器是不支持这些新的语法,所以需要通过Babel 来将你的新语法编译成浏览器可以理解的旧语法。这是通过 Babel/core模块和babel/perset-env插件完成的。当然Babel还有其他的转换功能。
学前端
2020/06/11
9170
使用Webpack来做自己的cra脚手架
Webpack学习笔记
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。 Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。
earthchen
2020/09/24
1.4K0
webpack的基础入门
现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法
javascript.shop
2019/09/04
1.5K0
webpack的基础入门
点击加载更多

相似问题

React js index.html react道具

10

script.js文件未链接到index.html

44

在js变量中包含<script type=“text/javascript”>.</script>

10

无法获取公共/index.html中的env变量以用于react

15

Electron.js错误“要求”未在index.html的<script>标记中定义

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文