---
order: 8
navTitle: 网页
---
# SuperPage组件-嵌入网页

SuperPage提供了嵌入网页组件（iframe），可以将系统外部页面或系统内部的[元数据文件](/dev/meta/file-exts)URL嵌入到SuperPage中展示。如在SuperPage页面中嵌入`科普中国网`：

![嵌入网页](./images/2020-12-22-09-42-55.png)

示例地址：[嵌入网页](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E7%BD%91%E9%A1%B5)

## 嵌入系统外页面{#web}

在SuperPage中嵌入系统外的页面，只需要拖入网页组件，并设置外部网页路径。具体步骤如下：

![嵌入系统外页面](./images/2020-12-22-09-33-55.gif)

1. **拖入网页组件**： 在**组件区**>**嵌入**分组下将网页组件拖入到画布中
2. **设置路径**：在**属性栏**>**网页**>**路径**中将网页的路径设置为`http://www.kepuchina.cn`

## 嵌入系统内元数据页面{#meta}

使用嵌入系统内元数据页面与[嵌入系统外页面](#嵌入系统外页面web)的操作相同，在**路径**中建议输入**应用绝对地址**，可通过右键查看元数据属性的方式找到路径，如：`/DEMO/app/ap.app/案例/企业信息自助查询/企业一户式.spg`。

## 网页路径设置{#url}

网页路径可以是一个URL地址，也支持输入宏，同时支持多种地址类型，具体可参考[二维码内容设置](../more/qrcode.md#内容)。嵌入内部元数据和外部页面的路径设置有所区别：

- **系统外页面**：一般为**互联网URL地址**，如果嵌入的是一个外部应用页面，传递参数时则需要了解相应的参数说明文档
- **系统内元数据页面**：与嵌入元数据的**动态路径**属性类似，具体可参考[嵌入数据模型](./embeddatamodel.md#路径)，但是在传递参数时需要将参数写在URL后，如：`/DEMO/app/ap.app/案例/企业信息自助查询/企业一户式.spg?qydm=${[企业].[企业内部序号] ? [企业].[企业内部序号] :'017231fd0731445eb85ae3cd41d52ed6'}`，更多设置可查看文档：[URL参考](../../../../dev/references/sys-urls.md)

## 嵌入网页组件与嵌入元数据组件的区别{#differ}

嵌入网页组件会嵌入一个完整的`HTML页面`（iframe），即使是系统内部的元数据文件也是以网页形式嵌入的。而嵌入元数据组件嵌入的是一个`组件`（div），如[嵌入仪表板](./embedreport.md)、[嵌入CI表单](./embedform.md)等，可以和父页面有更多交互，如无刷新的传递参数、嵌入的SuperPage页面可以和父页面同时[提交数据](../../design/submit-data.md)等。