金山文档开放平台

主题

回到顶部
本页内容

挂载节点

挂载节点是指 js-sdk 插入 iframe 时挂载的节点，js-sdk 挂载节点在初始化时的可配置项。

<body>
  <div class="custom-mount"></div>
  <script>
    var jssdk = WebOfficeSDK.config({
      mount: document.querySelector('.custom-mount'),
    });
  </script>
</body>

js-sdk 初始化完成后会自动在挂载节点下面插入一个 iframe。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>WPS WebOffice Demo</title>
  <style>
    * { margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; overflow: hidden; }
    .custom-mount { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div class="custom-mount"></div>

  <script src="./web-office-sdk-v1.1.8.umd.js"></script>
  <script>
    window.onload = function() {
      const jssdk = WebOfficeSDK.config({
        url: '在线文档预览地址', // 该地址需要后端提供，https://wwo.wps.cn/office/p/xxx
        mount: document.querySelector('.custom-mount'),
      })
    }
  </script>
</body>
</html>

提示

由于 iframe 限制，所以需要给挂载的节点指定具体宽高

iframe 对象

如果需要对 iframe 对象做特殊处理，可以通过 js-sdk 实例化对象快速获取到 iframe 的 DOM 对象。

const jssdk = WebOfficeSDK.config({
  mount: document.querySelector('.custom-mount'),
});
console.log(jssdk.iframe);