如何用 Homepage 的 iframe 组件嵌入第三方页面并控制加载行为【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepageHomepage 是一个可自定义的首页 / 应用仪表盘。当你希望把某个第三方 Web 页面直接嵌进首页的服务卡片里、而不是只放一个跳转链接时可以使用type: iframe的 widget。本文基于 iframe 文档 和 Service 配置文档给出最小可用配置、各加载控制项的默认值与行为以及结果验证方式。先说一个文档明确警告的边界iframe widget 发出的请求不会经过 Homepage 代理因为请求是由浏览器直接发起的。也就是说能访问嵌入页面的前提是浏览器网络能到达src地址。准备条件确认 iframe 属于哪类 widget根据 Widgets 文档Homepage 有两类 widgetService widgets显示服务状态定义在services.yaml中挂在 service 条目下Info widgets显示头部信息系统、环境等定义在widgets.yaml中。iframe widget 属于 service widget 一侧它作为一个 widget 条目挂到services.yaml的某个 service 下。iframe 的渲染内容是标准 HTMLiframe其余 HTML 属性 Homepage 文档指向 MDN 的 iframe 文档作为参考。写入最小可用配置services.yaml的结构是顶层数组为 Group每个 Group 下是 service 条目数组每个 service 通过widget:单个或widgets:多个挂接 widget。iframe 的最小 widget 块如下src为要嵌入的页面地址name同时作为 iframe 的name与title属性- Group A: - My Embedded Page: href: http://example.com widget: type: iframe name: myIframe src: http://example.com其中href、icon等 service 属性均可选写法见 Service 配置文档决定嵌入行为的是widget:块里的type: iframe、name和src。控制加载与显示行为iframe 文档 给出的完整示例展示了全部可选配置项widget: type: iframe name: myIframe src: http://example.com classes: h-60 sm:h-60 md:h-60 lg:h-60 xl:h-60 2xl:h-72 # optional, use tailwind height classes referrerPolicy: same-origin # optional, no default allowPolicy: autoplay; fullscreen; gamepad # optional, no default allowFullscreen: false # optional, default: true loadingStrategy: eager # optional, default: eager allowScrolling: no # optional, default: yes refreshInterval: 2000 # optional, no default各选项的作用和默认值如下选项默认值说明classes未配置时组件回退为h-60 sm:h-60 md:h-60 lg:h-60 xl:h-60 2xl:h-72Tailwind 高度类控制 iframe 在卡片中的高度referrerPolicy无默认对应 iframe 的referrerPolicy属性示例值same-originallowPolicy无默认对应 iframe 的allow属性示例值autoplay; fullscreen; gamepadallowFullscreentrue是否允许嵌入页面全屏loadingStrategyeager对应 iframe 的loading属性allowScrollingyes设为no时禁止嵌入页面滚动refreshInterval无默认设置后按间隔毫秒刷新 iframe两个行为细节来自 组件实现配置时需要知道refreshInterval最小粒度为 1 秒。实现中若配置值小于 1000会被强制按 1000 处理刷新通过重建 iframekey变化触发重挂载完成即配置后页面会周期性重新加载而不是局部刷新。allowScrolling: no的具体效果是同时设置pointerEvents: none和overflow: hidden嵌入页面既不可滚动也不可交互。另外iframe widget 的 服务端定义 是一个空对象说明它不通过 Homepage 的 API 拉取数据页面完全由浏览器按src加载——这与开头不代理的警告一致。可选分支一个 service 挂多个 widget如果一个服务卡片内需要嵌入多个页面或 iframe 与其他数据型 widget 混排用复数形式widgets:列表即可例如- Group A: - My Embedded Pages: href: http://example.com widgets: - type: iframe name: pageA src: http://example.com/a - type: iframe name: pageB src: http://example.com/b classes: h-40 sm:h-40 md:h-40 lg:h-40 xl:h-40 2xl:h-40多 widget 的通用写法如同时挂emby、uptimekuma等见 Service 配置文档的 Multiple Widgets 一节。文档同时注明多 widget 目前不支持通过 Kubernetes ingress annotations 定义。验证结果项目中的 组件测试 给出了渲染后 iframe 节点应携带的属性可作为核对依据src等于配置的srctitle和name等于配置的namescrolling等于配置的allowScrolling如noclassName中包含配置的classes。在实际页面中保存services.yaml后打开 Homepage 首页对应服务卡片区域应显示嵌入的第三方页面用浏览器开发者工具检查该卡片内的iframe节点确认上述属性与配置一致即说明配置生效。限制与注意事项iframe 请求由浏览器直接发出不经过 Homepage 代理Homepage 服务端能否访问该页面与嵌入是否成功无关。refreshInterval配置小于 1000 毫秒时按 1000 毫秒执行。其余 iframe HTML 属性如referrerPolicy、allow的取值范围Homepage 文档未逐一展开以 MDN 的 iframe 文档为准。【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何用 Homepage 的 iframe 组件嵌入第三方页面并控制加载行为
如何用 Homepage 的 iframe 组件嵌入第三方页面并控制加载行为【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepageHomepage 是一个可自定义的首页 / 应用仪表盘。当你希望把某个第三方 Web 页面直接嵌进首页的服务卡片里、而不是只放一个跳转链接时可以使用type: iframe的 widget。本文基于 iframe 文档 和 Service 配置文档给出最小可用配置、各加载控制项的默认值与行为以及结果验证方式。先说一个文档明确警告的边界iframe widget 发出的请求不会经过 Homepage 代理因为请求是由浏览器直接发起的。也就是说能访问嵌入页面的前提是浏览器网络能到达src地址。准备条件确认 iframe 属于哪类 widget根据 Widgets 文档Homepage 有两类 widgetService widgets显示服务状态定义在services.yaml中挂在 service 条目下Info widgets显示头部信息系统、环境等定义在widgets.yaml中。iframe widget 属于 service widget 一侧它作为一个 widget 条目挂到services.yaml的某个 service 下。iframe 的渲染内容是标准 HTMLiframe其余 HTML 属性 Homepage 文档指向 MDN 的 iframe 文档作为参考。写入最小可用配置services.yaml的结构是顶层数组为 Group每个 Group 下是 service 条目数组每个 service 通过widget:单个或widgets:多个挂接 widget。iframe 的最小 widget 块如下src为要嵌入的页面地址name同时作为 iframe 的name与title属性- Group A: - My Embedded Page: href: http://example.com widget: type: iframe name: myIframe src: http://example.com其中href、icon等 service 属性均可选写法见 Service 配置文档决定嵌入行为的是widget:块里的type: iframe、name和src。控制加载与显示行为iframe 文档 给出的完整示例展示了全部可选配置项widget: type: iframe name: myIframe src: http://example.com classes: h-60 sm:h-60 md:h-60 lg:h-60 xl:h-60 2xl:h-72 # optional, use tailwind height classes referrerPolicy: same-origin # optional, no default allowPolicy: autoplay; fullscreen; gamepad # optional, no default allowFullscreen: false # optional, default: true loadingStrategy: eager # optional, default: eager allowScrolling: no # optional, default: yes refreshInterval: 2000 # optional, no default各选项的作用和默认值如下选项默认值说明classes未配置时组件回退为h-60 sm:h-60 md:h-60 lg:h-60 xl:h-60 2xl:h-72Tailwind 高度类控制 iframe 在卡片中的高度referrerPolicy无默认对应 iframe 的referrerPolicy属性示例值same-originallowPolicy无默认对应 iframe 的allow属性示例值autoplay; fullscreen; gamepadallowFullscreentrue是否允许嵌入页面全屏loadingStrategyeager对应 iframe 的loading属性allowScrollingyes设为no时禁止嵌入页面滚动refreshInterval无默认设置后按间隔毫秒刷新 iframe两个行为细节来自 组件实现配置时需要知道refreshInterval最小粒度为 1 秒。实现中若配置值小于 1000会被强制按 1000 处理刷新通过重建 iframekey变化触发重挂载完成即配置后页面会周期性重新加载而不是局部刷新。allowScrolling: no的具体效果是同时设置pointerEvents: none和overflow: hidden嵌入页面既不可滚动也不可交互。另外iframe widget 的 服务端定义 是一个空对象说明它不通过 Homepage 的 API 拉取数据页面完全由浏览器按src加载——这与开头不代理的警告一致。可选分支一个 service 挂多个 widget如果一个服务卡片内需要嵌入多个页面或 iframe 与其他数据型 widget 混排用复数形式widgets:列表即可例如- Group A: - My Embedded Pages: href: http://example.com widgets: - type: iframe name: pageA src: http://example.com/a - type: iframe name: pageB src: http://example.com/b classes: h-40 sm:h-40 md:h-40 lg:h-40 xl:h-40 2xl:h-40多 widget 的通用写法如同时挂emby、uptimekuma等见 Service 配置文档的 Multiple Widgets 一节。文档同时注明多 widget 目前不支持通过 Kubernetes ingress annotations 定义。验证结果项目中的 组件测试 给出了渲染后 iframe 节点应携带的属性可作为核对依据src等于配置的srctitle和name等于配置的namescrolling等于配置的allowScrolling如noclassName中包含配置的classes。在实际页面中保存services.yaml后打开 Homepage 首页对应服务卡片区域应显示嵌入的第三方页面用浏览器开发者工具检查该卡片内的iframe节点确认上述属性与配置一致即说明配置生效。限制与注意事项iframe 请求由浏览器直接发出不经过 Homepage 代理Homepage 服务端能否访问该页面与嵌入是否成功无关。refreshInterval配置小于 1000 毫秒时按 1000 毫秒执行。其余 iframe HTML 属性如referrerPolicy、allow的取值范围Homepage 文档未逐一展开以 MDN 的 iframe 文档为准。【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考