Module dom/script

insertScript

• insertScript(options: InsertOptions): Promise<void>

• 动态插入Js或者Css脚本

  example

  插入css

  import { dom, url } from 'onex-utils';
  dom.insertScript({
   type: dom.ScriptType.css,
   src: 'https://test.css',
  }).then(() => {
   console.log('脚本加载完成');
  })
  

  example

  插入js

  remarks

  针对umd类型的script脚本，可以在then中通过window对象 获取其绑定的方法

  import { dom, url } from 'onex-utils';
  dom.insertScript({
   type: dom.ScriptType.javascript,
   src: 'https://test.js',
  }).then(() => {
   console.log('脚本加载完成，获取绑定的内容：', window?._render_);
  })
  

  example

  插入 css content

  remarks

  使用css变量修改全局变量

  import { dom } from 'onex-utils';
  
  dom.insertScript({
   type: dom.ScriptType.javascript,
   content: ':root {--main-bg-color: brown;}"',
  }).then(() => {
   console.log('脚本加载完成');
  })
  

  example

  插入js content

  remarks

  将脚本内容通过script标签掺入HTML head标签中

  import { dom } from 'onex-utils';
  
  dom.insertScript({
   type: dom.ScriptType.javascript,
   content: 'window.test="hello world"',
  }).then(() => {
   console.log('脚本加载完成，获取绑定的内容：', window?.test);
  })
  

  Parameters

  • options: InsertOptions

  Returns Promise<void>