[Feature]页面功能优化-嵌入HTML页面

[carolcoral]

前置条件

• 已经在 Issues 列表中搜索了相关问题。
• 这是和 Halo 相关的特性，如果是非项目本身的问题，建议在 Discussions 提交。
• 如果是插件和主题特性建议，请在对应的插件和主题仓库提交。

你当前使用的版本

2.20.11

描述一下此特性

目前在页面中使用嵌入HTML页面设置高度只能使用固定的PX像素，但是我想要使用100%或者100vh就会导致显示的高度非常小。
我希望能在页面中将嵌入的页面完整的整体展示，而不是通过滚动条去查看，谢谢🙏

被嵌入页面: https://blog.xindu.site/shop?preview-theme=theme-hao
嵌入页面: https://blog.xindu.site/afdian/shop?preview-theme=theme-hao

附加信息

No response

[ruibaby]

iframe 的 height 应该是不支持 vh 这样的单位的，100% 需要父容器固定高度，所以也不行。可能的解决方式是将高度设置放在 style。

PR Welcome

[carolcoral]

搜索了一些相关文档，综合来看最合适的方式是在编辑器中控制高度位置新增一个下拉选择自动填充高度，同时给ifram增加id属性和值。当选择该类型控制高度的时候通过JS的方式去生成iframe的页面高度。参考文档：
https://cloud.tencent.com/developer/article/2096348

[ruibaby]

要按照这种方式的话，那你手动注入代码好了，编辑器内不太可能去注入 JS。

[carolcoral]

目前的ifram没有自动生成随机id属性和值，如果我直接注入的话会影响全局iframe，所以如果可以的话建议编辑器能自动生成下，这样我们注入js会比较好

[LIlGG]

即便将高度设置放置在 style 中，也只能保证高度与当前页面高度一致，滚动条还是会出现。

JS 去生成页面高度也不可控，因为 iframe 嵌入的内容未知，是否跨域也未知，一旦跨域也无法获取到高度。

所以，想通过在文章的 iframe 去完整展示另一个页面，基本是不可能的，尤其是本身文章就限制在了某一个区域。因此我建议你换种方式，例如使用自定义页面，或者自定义一个菜单直接跳转的方式。

[carolcoral]

@LIlGG 目前使用的就是自定义页面

[wan92hen]

可以给主题加个专门用来显示 iframe 的自定义页面模板，在自定义页面设置中选择这个模板，并指定 iframe 地址

[carolcoral]

可以给主题加个专门用来显示 iframe 的自定义页面模板，在自定义页面设置中选择这个模板，并指定 iframe 地址

@ruibaby 这个可以，现在不是可以弄页面模板的么