挂载节点
挂载节点是指文档应用插入页面时挂载的 HTML DOM 节点,如果没有指定挂载节点,则默认生成一个撑满全屏的 div 节点。
JSSDK 初始化时,会自动在挂载节点下面插入一个 iframe 元素,并在该 iframe 元素中渲染文档应用。
请在
load
或DOMContentLoaded
事件被触发后,确保挂载节点存在,再执行初始化操作。
由于 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 实例化对象快速获取到 iframe 的 DOM 对象。
javascript
const jssdk = WebOfficeSDK.config({
mount: document.querySelector('.custom-mount'),
});
console.log(jssdk.iframe);