# insight-iframe-examples

**Repository Path**: feifeitongxue/insight-iframe-examples

## Basic Information

- **Project Name**: insight-iframe-examples
- **Description**: insight iframe双向嵌入开发案列
- **Primary Language**: HTML
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-31
- **Last Updated**: 2022-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# oMapInsight iframe嵌入开发案列

- html 案列 insight 嵌入iframe [html/insight-iframe.html]
- html 案列 网页  以iframe形式嵌入 insight定制的大屏 [html/iframe-insight.html]
- vue2 案列 insight 嵌入iframe [insight-iframe-vue]
- vue2 案列 网页  以iframe形式嵌入 insight定制的大屏 [iframe-insight-vue]

### 直接用 `<script>` 引入

```
<script src="http://wx.gisocn.com:11510/insight-open/js/jinsight@1.0.5.js" type="text/javascript"></script>
```

### NPM

```
# 最新版
npm install jinisght -S
```

### YARN

```
# 最新版
yarn add jinisght -S
```

## 初始化

```
import Insight from "jinsight"

// 初始化
const insight = new Insight([{
  id: "insight定制的大屏ID",
  target: "iframe标签的id",
  // insight里的组件全部加载完毕
  onload: function(){
    console.log("左边的insight定制可视化加载完毕", "可以发送事件了")
  }
}])
```

初始化参数：

| 参数 | 解释  |
| :-----| :---- |
| object[] | 初始化Insight参数，对象数组，选填，如果是页面中嵌入insight定制的大屏需要填参数  |
| id |  insight定制的大屏ID |
| target |  iframe标签的id |
| onload |  insight里的组件全部加载完毕后的回调函数，只有触发了这个事件后，对insight发送状态变更事件才会生效 |

## 监听状态变更

监听insight组件里注册的变量值变更

```
insight.on("name", value => {
  // insight大屏里面，全局变量name, 值变更 value
  console.log("name", value)
})
```

| 参数 | 属性 | 解释  |
| :----- | :-----| :---- |
| arguments[0] | string | 监听insight大屏中的状态变量名 |
| arguments[1] | function | insight大屏中的状态值变更后的回调函数 |

## 推送状态变更

推送全局变量的值变更事件给insight定制的大屏

```
var province = "北京"
// 给insight发送状态变更
insight.emit("province", province)
```

| 参数 | 属性 | 解释  |
| :----- | :-----| :---- |
| arguments[0] | string | 状态的变量名 |
| arguments[1] | string｜number | 推送给insight大屏，变更的状态值 |

## 注销监听事件

注销监听事件，防止内存泄漏

```
# 比如在vue项目中，一般在 `beforeDestroy` 的生命周期中执行
insight.off("name")
```

| 参数 | 属性 | 解释  |
| :----- | :-----| :---- |
| arguments[0] | string | 监听的状态变量名 |

## 注销所有监听事件

注销所有监听事件，防止内存泄漏

```
insight.clear()
```


## 状态变量名

> 查看insight大屏中，组件点击事件，推送的状态值变更的变量名，可以用 `insight.on('变量名', 事件)` 监听到该值的变化

![alt](http://wx.gisocn.com:11707/uploads/medium/c40d73aef51bbba60493c2110b7c58d4.png)

## 推送变量值

> 查看insight大屏中，组件监听的状态值变更，改变组件的显示数据，可以用 `insight.emit("变量名", 变量值)` 推送该值的变更，切换大屏组件的数据

![alt](http://wx.gisocn.com:11707/uploads/medium/6d9362d8f7d638e8127d75f8698762cb.png)