Skip to content
开发文档
能力中心
应用市场
WebOffice
开发者后台

挂载节点

挂载节点是指文档应用插入页面时挂载的 HTML DOM 节点,如果没有指定挂载节点,则默认生成一个撑满全屏的 div 节点。

JSSDK 初始化时,会自动在挂载节点下面插入一个 iframe 元素,并在该 iframe 元素中渲染文档应用。

请在 loadDOMContentLoaded 事件被触发后,确保挂载节点存在,再执行初始化操作。

由于 iframe 限制,需要在初始化时给挂载节点指定具体宽高,否则可能会导致文档绘制异常。

示例代码:

html
<!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 对象做特殊处理,可以通过 JSSDK 实例化对象快速获取到 iframeDOM 对象。

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