-
Notifications
You must be signed in to change notification settings - Fork 257
/
Copy pathmini.html
137 lines (134 loc) · 5.95 KB
/
mini.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link type="image/x-icon" href="//gw.alicdn.com/tfs/TB1gRomUlr0gK0jSZFnXXbRRXXa-200-200.png" rel="shortcut icon">
<title>嵌入模式测试页</title>
</head>
<body>
<div style="display: flex;" data-focusable>
some other text
<button style="margin-left: 100px;" id="destroy-rd">销毁设计器</button>
<button style="margin-left: 10px;" disabled id="setup-rd">安装设计器</button>
<button style="margin-left: 10px;" id="virtual">虚拟渲染</button>
<button style="margin-left: 10px;" id="print">打印</button>
<div style="margin-left: 10px;">界面全模块化，可任意拆解组装</div>
</div>
<div style="display:flex;">
<div style="width:150px">
left
</div>
<div id="app" class="app"
style="width:1300px;height:600px;border:solid 1px #ccc;position: relative;overflow: clip;">
<div style="display: flex;align-items: center;justify-content: center; height: 100%;">
这里可以放一个加载动画...
</div>
</div>
<div>
right
</div>
</div>
<div data-focusable>
<input placeholder="外部输入框测试" />
bottom text
</div>
<script src="dist/designer.js?v=202501230830"></script>
<script>
//--－start--- 以下是环境检测提示，方便有问题时自查，正式使用时建议删除
if(!CSS.supports('overflow:clip')||
!CSS.supports('inset:auto')){
console.error('unsupport browser: '+navigator.userAgent);
}
if(!location.protocol.startsWith('http')){
alert('请配置一个web服务器,通过http的方式访问~')
}
//---end---
let {searchParams} = new URL(location.href);
let id = searchParams.get('id');
let setup = () => {
designer.setup({
version:'202501230830',
rootId: 'app',
mini: true,//迷你模式需要配置该参数减少界面展示
viewerUrl: './viewer.html?from=mini',
getImageUrl: './apis/images.json',
getFieldUrl: './apis/fields.json',
saveContentUrl:'./apis/content.json?id='+id,//保存设计区内容接口
//getTemplateUrl:'./apis/example.json',
});
};
let setupBtn = document.getElementById('setup-rd');
let destroyBtn = document.getElementById('destroy-rd');
let virtual = document.getElementById('virtual');
let pt=document.getElementById('print');
document.addEventListener('rd.dialog',e=>{
let focusables=document.querySelectorAll('[data-focusable]');
for(let f of focusables){
f.inert=e.open;
}
});
setupBtn.addEventListener('click', () => {
setup();
setupBtn.disabled = true;
destroyBtn.disabled = false;
});
destroyBtn.addEventListener('click', () => {
designer.destroy();
destroyBtn.disabled = true;
setupBtn.disabled = false;
});
let c = 0;
let { origin } = location;
virtual.addEventListener('click', () => {
let pId = c++;//在当前函数内生成一个pId，用于识别创建多个iframe对象后数据通信问题
//隐藏iframe
let iframe = document.createElement('iframe');
iframe.style.cssText = 'position:absolute;top:-500cm;left:-500cm';
document.body.append(iframe);
let win = iframe.contentWindow;
let listen = async ({ data }) => {
//只有通信数据是自己的才处理
if (data.pId == pId) {
if (data.action == 'ready') {//就绪，则传递当前设计器里面的内容
win.postMessage(await designer.get(), origin);
} else {//获取虚拟渲染的内容后，删除iframe并移除事件监听
window.removeEventListener('message', listen);
iframe.remove();
//data.renderData即是包含样式及分好页的数据
console.log(data.renderData);
}
}
};
window.addEventListener('message', listen);
iframe.src = './proxy.html?pId=' + pId;
});
pt.addEventListener('click', () => {
let pId = c++;//在当前函数内生成一个pId，用于识别创建多个iframe对象后数据通信问题
//隐藏iframe
let iframe = document.createElement('iframe');
iframe.style.cssText = 'position:absolute;top:-500cm;left:-500cm';
document.body.append(iframe);
let win = iframe.contentWindow;
let listen = async ({ data }) => {
//只有通信数据是自己的才处理
if (data.pId == pId) {
if (data.action == 'ready') {//就绪，则传递当前设计器里面的内容
win.postMessage(await designer.get(), origin);
} else {//获取虚拟渲染的内容后，删除iframe并移除事件监听
window.removeEventListener('message', listen);
iframe.remove();
//data.renderData即是包含样式及分好页的数据
//console.log(data.renderData);
}
}
};
window.addEventListener('message', listen);
iframe.src = './proxy.html?pId=' + pId+'&action=print';
});
setup();
</script>
</body>
</html>