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
/*
* @Title:
* @Author: hongmye
* @Date: 2023-01-10 11:18:55
*/
import React, { useState, useEffect } from 'react';
import Iframe from 'react-iframe';
import Empty from '@wisdom-components/empty';
import axios from 'axios';
import classNames from 'classnames';
import { appService } from '@/api';
import { decode, encode } from 'js-base64';
import styles from './index.less';
const IframeContainer = props => {
const { linkUrl, onMessageBack, loading } = props;
const onMessage = e => {
onMessageBack && onMessageBack(e?.data);
};
const onError = e => {
// onMessageBack && onMessageBack({ type: '无法连接' });
};
useEffect(() => {
if (linkUrl) {
// const url = linkUrl;
// const baseUrl = url.split('civbase')[0];
// appService
// .HealthCheckUrl({
// address: encode(baseUrl),
// })
// .then(res => {
// if (res?.data !== 1) {
// onMessageBack && onMessageBack({ type: '无法连接' });
// }
// })
// .catch(err => {
// onMessageBack && onMessageBack({ type: '无法连接' });
// });
}
}, [linkUrl]);
useEffect(() => {
// iframe通信
window.addEventListener('message', onMessage);
window.addEventListener('error', onError, true);
return () => {
window.removeEventListener('message', onMessage);
window.removeEventListener('error', onError);
};
}, [linkUrl, onError, onMessage, onMessageBack]);
return (
<div className={classNames(styles['tab-iframe'])}>
{linkUrl ? (
<Iframe
url={linkUrl}
width="100%"
height="100%"
display="block"
position="relative"
styles={{ border: 'none' }}
/>
) : (
<Empty description="配置url链接才能显示哦！" />
)}
</div>
);
};
export default IframeContainer;