加载器

通过加载器加载 LG-SDK，简化外部资源加载过程，并支持 SRI 功能。

获取资源清单

您可以访问这里查看需要的资源及其 integrity。

{
  "loader.js": {
    "src": "loader.js",
    "integrity": "sha256-caPlpcV6VYynRs8VPBcEarUSoetDIgD0Ye2P/Mu56oM= sha384-kyqOkFAmywWMgZUbXM/a2EahckHxW6NhKHinRQKED0r2gz51PVGJ9926aq7eDjPZ sha512-9NVpOZmb+H2H+xhcGV6Rv0LfB6dB469dzQLWK8poqK3XFjEW5MQyJ/zTnHaVBHRX7HAmTzx09/YSK/di5p6gyA=="
  }
}

或者访问这里获取带内容哈希的资源及其 integrity。

{
  "loader.js": {
    "src": "loader.265364fffec01d8ba91f.js",
    "integrity": "sha256-9fVUVsMfZ5LOi2eDxZrMYcbhXcm35VykwEZJP/6Bn4o= sha384-5kJTmEuUEISIKk818H40VzzT52npLn/Ikmsm1+9v9CGC5BF1n77G8QoV+fB45Aef sha512-fBRIIDa0JZYR+G28ZgWUukA8zEIznXr0BCy3EkKBHwTKauZUWNU4IAF8eiNoUYA2j5IAf/4gmYUmh/lxEl1OyA=="
  }
}

如何使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>loader</title>
  
  <script
    async
    id="loader"
    crossorigin="anonymous"
    src="https://content.legendtrading.com/jssdk-base/loader.js"
    integrity="sha256-caPlpcV6VYynRs8VPBcEarUSoetDIgD0Ye2P/Mu56oM= sha384-kyqOkFAmywWMgZUbXM/a2EahckHxW6NhKHinRQKED0r2gz51PVGJ9926aq7eDjPZ sha512-9NVpOZmb+H2H+xhcGV6Rv0LfB6dB469dzQLWK8poqK3XFjEW5MQyJ/zTnHaVBHRX7HAmTzx09/YSK/di5p6gyA=="
  ></script>
</head>
  
<body>
  <div id="wrapper"></div>
  <script>
    document.querySelector("#loader").addEventListener("load", async () => {
      console.log(window.LegendLoader)
      
      await window.LegendLoader.loadJssdkBase()
      // LP-SDK Base loaded
      console.log(window.LegendBase)

      await window.LegendLoader.loadJssdkDesktop()
      // LP-SDK Desktop version loaded
      console.log(customElements.get('legend-trade-full'))
      // append <legend-trade-full> with proper attributes
      document.querySelector("#wrapper").innerHTML = `<legend-trade-full
        timestamp="1587365207"
        signature="0123456789ABCDEF"
        app-id="Bitrue"
        app-uid="d58e3582afa99040e27b92b13c8f2280"
        app-url="https=//www.bitrue.com/"
        app-key="xxxxxxxx"
        app-email="[email protected]"
      ></legend-trade-full>`

      await window.LegendLoader.loadJssdkMobile()
      // LP-SDK Mobile version loaded
      console.log(customElements.get('legend-trade'))
      // append <legend-trade> with proper attributes
      document.querySelector("#wrapper").innerHTML = `<legend-trade
        timestamp="1587365207"
        signature="0123456789ABCDEF"
        app-id="Bitrue"
        app-uid="d58e3582afa99040e27b92b13c8f2280"
        app-url="https=//www.bitrue.com/"
        app-key="xxxxxxxx"
        app-email="[email protected]"
      ></legend-trade>`
    })
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>loader</title>
  
  <script
    async
    id="loader"
    crossorigin="anonymous"
    src="https://content.legendtrading.com/jssdk-base/loader/loader.265364fffec01d8ba91f.js"
    integrity="sha256-9fVUVsMfZ5LOi2eDxZrMYcbhXcm35VykwEZJP/6Bn4o= sha384-5kJTmEuUEISIKk818H40VzzT52npLn/Ikmsm1+9v9CGC5BF1n77G8QoV+fB45Aef sha512-fBRIIDa0JZYR+G28ZgWUukA8zEIznXr0BCy3EkKBHwTKauZUWNU4IAF8eiNoUYA2j5IAf/4gmYUmh/lxEl1OyA=="
  ></script>
</head>
  
<body>
  <div id="wrapper"></div>
  <script>
    document.querySelector("#loader").addEventListener("load", async () => {
      console.log(window.LegendLoader)
      
      await window.LegendLoader.loadJssdkBase()
      // LP-SDK Base loaded
      console.log(window.LegendBase)

      await window.LegendLoader.loadJssdkDesktop()
      // LP-SDK Desktop version loaded
      console.log(customElements.get('legend-trade-full'))
      // append <legend-trade-full> with proper attributes
      document.querySelector("#wrapper").innerHTML = `<legend-trade-full
        timestamp="1587365207"
        signature="0123456789ABCDEF"
        app-id="Bitrue"
        app-uid="d58e3582afa99040e27b92b13c8f2280"
        app-url="https=//www.bitrue.com/"
        app-key="xxxxxxxx"
        app-email="[email protected]"
      ></legend-trade-full>`

      await window.LegendLoader.loadJssdkMobile()
      // LP-SDK Mobile version loaded
      console.log(customElements.get('legend-trade'))
      // append <legend-trade> with proper attributes
      document.querySelector("#wrapper").innerHTML = `<legend-trade
        timestamp="1587365207"
        signature="0123456789ABCDEF"
        app-id="Bitrue"
        app-uid="d58e3582afa99040e27b92b13c8f2280"
        app-url="https=//www.bitrue.com/"
        app-key="xxxxxxxx"
        app-email="[email protected]"
      ></legend-trade>`
    })
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>loader</title>
</head>
  
<body>
  <div id="wrapper"></div>

  <script type="module">
    import manifestLegendBase from "https://content.legendtrading.com/jssdk-base/manifest.json" with { type: "json" };
    // import manifestLegendBaseLoader from "https://content.legendtrading.com/jssdk-base/loader/manifest.json" with { type: "json" };

    const baseUrl = "https://content.legendtrading.com/jssdk-base/";

    async function loadScript(manifest, entry) {
      const { src, integrity } = manifest[entry];
      const $script = document.createElement("SCRIPT");
      $script.src = new URL(src, baseUrl);
      $script.integrity = integrity;
      $script.async = true;
      $script.crossOrigin = 'anonymous';

      const { promise, resolve } = Promise.withResolvers();

      $script.onload = () => {
        console.log("load script: ", src, baseUrl);
        resolve();
      };

      document.head.appendChild($script);

      return promise
    }

    await loadScript(manifestLegendBase, 'loader.js');
    // await loadScript(manifestLegendBaseLOADER, 'loader.js');

    await window.LegendLoader.loadJssdkBase()
    // LP-SDK Base loaded
    console.log(window.LegendBase)

    await window.LegendLoader.loadJssdkDesktop()
    // LP-SDK Desktop version loaded
    console.log(customElements.get('legend-trade-full'))
    // append <legend-trade-full> with proper attributes
    document.querySelector("#wrapper").innerHTML = `<legend-trade-full
      timestamp="1587365207"
      signature="0123456789ABCDEF"
      app-id="Bitrue"
      app-uid="d58e3582afa99040e27b92b13c8f2280"
      app-url="https=//www.bitrue.com/"
      app-key="xxxxxxxx"
      app-email="[email protected]"
    ></legend-trade-full>`

    await window.LegendLoader.loadJssdkMobile()
    // LP-SDK Mobile version loaded
    console.log(customElements.get('legend-trade'))
    // append <legend-trade> with proper attributes
    document.querySelector("#wrapper").innerHTML = `<legend-trade
      timestamp="1587365207"
      signature="0123456789ABCDEF"
      app-id="Bitrue"
      app-uid="d58e3582afa99040e27b92b13c8f2280"
      app-url="https=//www.bitrue.com/"
      app-key="xxxxxxxx"
      app-email="[email protected]"
    ></legend-trade>`
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>loader</title>
</head>
  
<body>
  <div id="wrapper"></div>

  <script type="module">
    async function loadScript(url, entry) {
      const { default: manifest } = await import(url, { with: { type: "json" } });
      const { src, integrity } = manifest[entry];
      const $script = document.createElement("SCRIPT");
      $script.src = new URL(src, url);
      $script.integrity = integrity;
      $script.async = true;
      $script.crossOrigin = 'anonymous';

      const { promise, resolve } = Promise.withResolvers();

      $script.onload = () => {
        console.log("load script: ", src, url);
        resolve();
      };

      document.head.appendChild($script);

      return promise
    }

    await loadScript('https://content.legendtrading.com/jssdk-base/manifest.json', 'loader.js');
    // await loadScript('https://content.legendtrading.com/jssdk-base/loader/manifest.json', 'loader.js');

    await window.LegendLoader.loadJssdkBase()
    // LP-SDK Base loaded
    console.log(window.LegendBase)

    await window.LegendLoader.loadJssdkDesktop()
    // LP-SDK Desktop version loaded
    console.log(customElements.get('legend-trade-full'))
    // append <legend-trade-full> with proper attributes
    document.querySelector("#wrapper").innerHTML = `<legend-trade-full
      timestamp="1587365207"
      signature="0123456789ABCDEF"
      app-id="Bitrue"
      app-uid="d58e3582afa99040e27b92b13c8f2280"
      app-url="https=//www.bitrue.com/"
      app-key="xxxxxxxx"
      app-email="[email protected]"
    ></legend-trade-full>`

    await window.LegendLoader.loadJssdkMobile()
    // LP-SDK Mobile version loaded
    console.log(customElements.get('legend-trade'))
    // append <legend-trade> with proper attributes
    document.querySelector("#wrapper").innerHTML = `<legend-trade
      timestamp="1587365207"
      signature="0123456789ABCDEF"
      app-id="Bitrue"
      app-uid="d58e3582afa99040e27b92b13c8f2280"
      app-url="https=//www.bitrue.com/"
      app-key="xxxxxxxx"
      app-email="[email protected]"
    ></legend-trade>`
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>loader</title>
</head>
  
<body>
  <div id="wrapper"></div>

  <script type="module">
    async function loadScript(url, entry) {
      const { default: manifest } = await import(url, { with: { type: "json" } });
      const { src, integrity } = manifest[entry];
      const $script = document.createElement("SCRIPT");
      $script.src = new URL(src, url);
      $script.integrity = integrity;
      $script.async = true;
      $script.crossOrigin = 'anonymous';

      const { promise, resolve } = Promise.withResolvers();

      $script.onload = () => {
        console.log("load script: ", src, url);
        resolve();
      };

      document.head.appendChild($script);

      return promise
    }

    await loadScript('https://content.legendtrading.com/jssdk-base/manifest.json', 'legend-base.js');

    // LP-SDK Base loaded
    console.log(window.LegendBase)
  </script>
</body>
</html>