主题
动态改变嵌入 URL 指南
嵌入场景中，经常会遇到根据业务和交互需要，动态修改嵌入页面 URL 的情况。针对这种需求，HENGSHI SENSE 嵌入的页面支持以下2种方式动态修改嵌入 iFrame 的 URL。
PostMessage
嵌入过程中可以使用 PostMessage 动态修改嵌入页面的 URL，支持hs_urlpush和hs_urlchange两种方式。使用 PostMessage 动态修改嵌入页面 URL 时不会重新加载页面。
URL push
下面是在 PostMessage 中使用hs_urlpush方式动态修改页面 URL 的示例。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Local Test</title>
<style>
h2 {
font-size: 16px;
font-weight: normal;
color: #999;
}
h2 i {
color: #333;
}
</style>
</head>
<body>
<button onClick="onUrlFilterChange()">发事件</button>
<iframe
allowFullScreen="true"
width="1280"
height="800"
frameborder="0"
id="iframe"
src="http://192.168.2.243:9998/share/2351A2F5/infographic/46CA0B3B">
</iframe>
<script>
var $iframe = document.getElementById('iframe');
function onUrlFilterChange() {
var pathname = '/share/2351A2F5/infographic/46CA0B3B';
var search = `?where=[{"field":{"fieldName":"_c6","dataset":39713,"label":"time","type":"date"},"dataset":39713,"kind":"function","op":"in","args":[{"kind":"function","op":"dow","args":[{"kind":"field","op":"_c6","dataset":39713}]},{"kind":"constant","op":[${randomNumber(1, 7)}, ${randomNumber(1, 7)}]}]}]`;
$iframe.contentWindow.postMessage(JSON.stringify({
event: 'dispatchCustomEvent',
data: ['hs_urlpush', {
pathname: pathname,
search: search,
}],
}), '*');
}
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
</script>
</body>
</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
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
URL change
系统也支持在 PostMessage 中使用hs_urlchange方式动态修改页面 URL，参考示例如下。
javascript
// JSON.parse(event.data) 后：
{
event: 'HengshiInteractiveEvent',
data: {
event: 'hs_urlchange',
data: {
pathname: '/app/xxx?aa=bb',
search: '?aa=bb'
query: {
aa: 'bb',
},
},
},
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
直接修改 iframe.src
可以通过直接编辑 iframe url 来实现嵌入页面 URL 的动态变化，效果和使用 ontentWindow.postMessage 是一样的，只是该方法会使页面重新加载，对性能会略有影响。
js
$iframe.src = 'https://preview.hengshi.com' + pathname + search;1