返回顶部

“嵌入”微件

在本主题中

  1. 示例
  2. 用法说明
  3. 设置
  4. 配置动态 URL
  5. 共享身份验证

“嵌入”微件用于通过 URL 或代码嵌入网站内容，以实现额外的自定义功能。

示例

使用此微件可支持以下应用程序设计要求：

  • 您需要根据要素选择从网站提供其他信息。 要素图层上存在一个字段，其中包含用户在地图上选择某个要素或单击按钮以查看该要素的详细信息后您想要嵌入的网站 URL。
  • 您想要在应用程序中嵌入仪表盘，并允许用户向 Web 体验 URL 末尾添加 URL 参数，以更改仪表盘的当前视图（从而显示特定区域数据）。
  • 您想要使用 HTML 代码（例如网站）嵌入内容，或复制示例中的代码（例如点聚类）。

用法说明

要使用 URL 参数创建动态 URL，使用要使用的 URL 参数保存并重新加载应用程序，以在 URL 信息窗口中选择相应的键。 在运行时，“嵌入”微件会使用添加到主机应用程序 URL 的 URL 参数查找指定 URL 的名称并与之匹配，然后使用相应的值解析 URL 以显示嵌入的应用程序。

注：

如果您选择直接在“嵌入”微件中显示 PDF，出于安全原因，某些用户可能无法在某些浏览器中查看它。

设置

“嵌入”微件包含以下设置：

  • 嵌入方式 - 选择是通过 URL 还是代码进行嵌入。
    • URL - 使用静态 URL 嵌入网站或使用以下选项形成动态 URL：
      注：

      仅支持 HTTPS URL。 出于安全考虑，会通过同源策略对嵌入的应用程序进行约束。 对于 *.arcgis.com 和 *.esri.com 之外的域，系统会自动添加 sandbox 属性。

      • 连接到数据 - 选择图层作为数据源（从 web 地图、web 场景、直接图层或通过 URL 进行添加），然后单击数据按钮以选择包含 URL 或要添加到现有 URL 作为参数的属性。 当描述未通过数据中的 URL 内容进行填充时，使用标注字段在微件中显示描述。
      • URL 信息 - 获取在构建器中要作为后缀添加到应用程序 URL 的 URL 参数。 将动态 URL 配置为将 URL 参数从“嵌入”微件传递到嵌入应用程序，以便用户可以在运行时将 URL 参数添加到 web 体验 URL，来控制嵌入应用程序的显示内容。
        注：

        有关嵌入应用程序支持的 URL 参数的信息，请参考 ArcGIS Dashboards 和 ArcGIS Web AppBuilder 等对应的文档。

    • 代码 - 添加自定义 HTML 代码，以将第三方元素嵌入到体验中。

      为了满足合规性要求，微件将限制您可以通过代码嵌入的内容。 目前，该微件支持 HTML iframe 中的 URL 内容、从精选流行社交媒体网站共享的代码以及 HTML 标签和属性的子集。 以下为受支持的 HTML 格式列表：

      格式化示例

      带有 URL 内容的标准 HTML iframe

      
<iframe width="100%" height="600px" frameborder="0" scrolling="yes" marginheight="" marginwidth="" src="https://developers.arcgis.com/"></iframe>

      YouTube

      <iframe width="560" height="315" src="https://www.youtube.com/embed/pNrsd5naN7U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

      Twitter

      Twitter 时间轴线示例：

      <a class="twitter-timeline" href="https://twitter.com/ArcGISApps?ref_src=twsrc%5Etfw">Tweets by ArcGISApps</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

      Facebook

      <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fesrigis%2Fphotos%2Fa.433181450280%2F10160256145415281%2F&show_text=true&width=500"
width="500" height="417" style="border:none;overflow:hidden"
scrolling="no" frameborder="0" allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media;
picture-in-picture; web-share"></iframe>

      Instagram

      
 <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/reel/CmZQDMJtMvc/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/reel/CmZQDMJtMvc/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;">View this post on Instagram</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div></div></a><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/reel/CmZQDMJtMvc/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A post shared by Esri (@esrigram)</a></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script>

      Vimeo

      <iframe src="https://player.vimeo.com/video/344310270?h=f8c418505e" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://vimeo.com/344310270">The Science of Where - ESRI</a> from <a href="https://vimeo.com/south422">422 South</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

      其他

      了解有关受支持的 HTML 的详细信息

      警告：

      出于性能原因，大小不能超过 8 KB（8192 个字符）。

      提示：

      如果您希望嵌入超过大小限制或并非来自受支持的源的复杂 HTML 页面，请将该页面部署到您自己的服务器并改为通过 URL 进行嵌入。

  • 自动刷新 - 设置自定义时间间隔（以分钟为单位），以自动刷新“嵌入”微件中的嵌入内容。 您可设置的最小值为 0.2 分钟（12 秒）。

配置动态 URL

按照以下步骤从 Web 体验中获取可传递到嵌入应用程序的 URL 参数：

  1. 添加“嵌入”微件并进行保存。
  2. 在浏览器窗口的地址栏中，将 URL 参数添加到 Web 体验 URL，然后按 Enter 键以重新加载页面。
    提示：

    由于构建器已包含应用程序 ID 参数，使用与号（例如 &state=）添加 URL 参数，而不是问号。

    使用 URL 参数重新加载构建器后，URL 信息按钮将显示用于构建动态 URL 的键。

  3. 在嵌入方式 URL 输入框中，粘贴要嵌入的应用程序的 URL。
  4. 在嵌入 URL 末尾，输入 URL 参数（例如 ?state=）。
  5. 单击 URL 信息按钮，然后选择对应的键以完成动态 URL。

    下面是嵌入仪表盘的示例动态 URL：

    https://<your portal url>/apps/dashboards/index.html#/<id>?state={appURL.search.state}

共享身份验证

一些 web 应用程序会提示用户使用 ArcGIS 帐户进行登录。 由于共享设置、应用程序包含使用高级内容的微件或者其他原因，应用程序可能需要进行登录。

如果您希望在您的 Experience Builder 应用程序中嵌入 ArcGIS web 应用程序，并且这两个应用程序均需要进行登录，则可以添加 arcgis-auth-origin 和 arcgis-auth-portal URL 参数以在两个应用程序之间共享身份验证，由此用户仅需登录一次。

要将私有 Experience Builder 应用程序嵌入另一个 Experience Builder 应用程序，请使用 ?arcgis-auth-origin= 来定义主机应用程序域 URL 以进行身份验证。 以下为示例：

https://<orgdomain>/experience/<AppID>/?arcgis-auth-origin=<your host app domain, such as https://localhost:3001>

要嵌入基于 JavaScript API 的应用程序（例如 Web AppBuilder 应用程序），对于主机应用程序域身份验证，请使用 ?arcgis-auth-origin=；对于基于 JavaScript API 的应用程序域身份验证，请使用 ?arcgis-auth-portal=。 以下为示例：

https://<orgdomain>/apps/webappviewer/index.html?id=<appID>&arcgis-auth-origin=<your host app domain, such as https://localhost:3001>&arcgis-auth-portal=<orgA URL>
https://www.arcgis.com/apps/dashboards/index.html#/<appID>?arcgis-auth-origin=https://experience.arcgis.com&arcgis-auth-portal=https://<myorg>.maps.arcgis.com

有关此主题的反馈?

在本主题中
  1. 示例
  2. 用法说明
  3. 设置
  4. 配置动态 URL
  5. 共享身份验证