js 动态加载 CSS JS资源文件

// 动态加载 css js 文件
export function LoadJsCssFile(filename, filetype) {
  if (filetype === "js") {
    //如果是.js文件
    var fileref = document.createElement("script");
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", filename);
  } else if (filetype === "css") {
    //如果是.css文件
    var fileref = document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", filename);
  }
  if (typeof fileref !== "undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref);
}
/**
 * 加载 script 文件
 * @param src
 */
export function loadScript(src) {
  var addSign = true;
  var scripts = document.getElementsByTagName("script");
  for (var i = 0; i < scripts.length; i++) {
    if (scripts[i] && scripts[i].src && scripts[i].src.indexOf(src) != -1) {
      addSign = false;
    }
  }
  if (addSign) {
    var $script = document.createElement("script");
    $script.setAttribute("type", "text/javascript");
    $script.setAttribute("src", src);
    document.getElementsByTagName("head").item(0).appendChild($script);
  }
}
/**
 * 加载 link 文件
 * @param href
 */
export function loadCss(href) {
  var addSign = true;
  var links = document.getElementsByTagName("link");
  for (var i = 0; i < links.length; i++) {
    if (links[i] && links[i].href && links[i].href.indexOf(href) !== -1) {
      addSign = false;
    }
  }
  if (addSign) {
    var $link = document.createElement("link");
    $link.setAttribute("rel", "stylesheet");
    $link.setAttribute("type", "text/css");
    $link.setAttribute("href", href);
    document.getElementsByTagName("head").item(0).appendChild($link);
  }
}
/**
 * 删除 script 文件
 * @param src
 */
export function removeScript(src) {
  var scripts = document.getElementsByTagName("script");
  for (var i = 0; i < scripts.length; i++) {
    if (scripts[i] && scripts[i].src && scripts[i].src.indexOf(src) !== -1) {
      scripts[i].parentNode.removeChild(scripts[i]);
    }
  }
}
/**
 * 删除 link 文件
 * @param href
 */
export function removeCss(href) {
  var links = document.getElementsByTagName("link");
  for (var i = 0; i < links.length; i++) {
    var _href = links[i].href;
    if (links[i] && links[i].href && links[i].href.indexOf(href) !== -1) {
      links[i].parentNode.removeChild(links[i]);
    }
  }
}

import React from "react";

export default class LoadCss extends React.Component {
  state = { stylePath: "" };

  handleButtonClick = (type) => {
    return () => {
      this.setState({ stylePath: type }, () => {
        const { stylePath } = this.state;
        const href = stylePath === 1 ? "/css/a.css" : "/css/b.css";
        this.loadCss(href);
        if (href === "/css/a.css") {
          this.removeCss("/css/b.css");
        } else {
          this.removeCss("/css/a.css");
        }
      });
    };
  };

  /**
   * 删除 link 文件
   * @param href
   */
  removeCss(href) {
    let links = document.getElementsByTagName("link");
    for (let i = 0; i < links.length; i++) {
      let _href = links[i].href;
      if (links[i] && _href && _href.indexOf(href) !== -1) {
        links[i].parentNode.removeChild(links[i]);
      }
    }
  }

  /**
   * 加载 link 文件
   * @param href
   */
  loadCss(href) {
    let addSign = true;
    let links = document.getElementsByTagName("link");
    for (let i = 0; i < links.length; i++) {
      if (links[i] && links[i].href && links[i].href.indexOf(href) !== -1) {
        addSign = false;
      }
    }
    if (addSign) {
      var $link = document.createElement("link");
      $link.setAttribute("rel", "stylesheet");
      $link.setAttribute("type", "text/css");
      $link.setAttribute("href", href);
      document.getElementsByTagName("head")[0].appendChild($link);
    }
  }

  render() {
    return (
      <div className="test">
        <link rel="stylesheet" type="text/css" href={this.state.stylePath} />
        <button type="button" onClick={this.handleButtonClick(1)}>
          加载a.css
        </button>
        <button type="button" onClick={this.handleButtonClick(2)}>
          加载b.css
        </button>
        <button onClick={() => this.props.history.push("/home")}>
          跳转首页
        </button>
      </div>
    );
  }
}

加载的js 、css文件 会直接在html中head标签中显示