WordPress页面插入720全景代码(或其他Iframe)自适应高度全屏显示教程

通常情况下,我们在WordPress中插入Iframe时,如果height给的是100%,很大程度上,都不能正常的实现100%的显示效果,最终会显示成如下:

WordPress页面插入720全景代码(或其他Iframe)自适应高度全屏显示教程

在上图中,我们给的代码是:

其中的widthheight都设置的是100%,但事与愿违,在页面上并不能正常的显示到100%

原因

出现这样的情况,其原因无外乎是Iframe继承了父级的高度,所以,我先看父级高度是多少。

WordPress页面插入720全景代码(或其他Iframe)自适应高度全屏显示教程

Iframe往上,wrap往下,这些元素的高度都并不是页面高度,自然而然,我们使用Iframe的时候,写的100%当然就不能真正实现100%页面高度。

当我们一直往上继续看,看到wrap时,可以看到wrap的高度,是完美的页面高度,既然如此,我们只需要把wrap高度赋值给Iframe即可实现100%完美页面高度。

WordPress页面插入720全景代码(或其他Iframe)自适应高度全屏显示教程

弯路

起初我是这样写的

请注意,这里的我们是尝试获取wrapmin-height并赋值给quanjing中的min-height,结果并没有生效,通过研究发现min-height属性如果是直接赋值给Iframestyle是可以撑起来高度,而如果是赋值给父级,则不能让Iframe的高度撑起来。

教程

默认情况下,WordPress引用了JQuery,一般会在header部分有如下代码

但经过测试,很多JQuery代码并不能得到正常执行,所以,我们在插入Iframe的地方再引用一个CDN的JQuery

而为了让Iframe工作起来更规范,我们最好用一个DIVIframe代码包起来

如上,我们将Iframe放在IDquanjingDIV中,这样我们操作JS代码时候,可以这样写

定义一个变量min_height,从wrapcssmin-height取值并赋值给min_height

控制台打印min_height,用于判断是否正常获取到min-height的值

将获取到的值,写入idquanjingdivcss中,给height赋值

将如上代码,放在页底即可。

效果

带鱼屏全屏下显示效果

WordPress页面插入720全景代码(或其他Iframe)自适应高度全屏显示教程

带鱼屏半屏下显示效果

WordPress页面插入720全景代码(或其他Iframe)自适应高度全屏显示教程

任意窗口大小显示效果

WordPress页面插入720全景代码(或其他Iframe)自适应高度全屏显示教程

感谢

感谢WordPress页面插入720全景代码(或其他Iframe)自适应高度全屏显示教程莱昂纳多·李对本教程中所涉及的代码进行的指导。

原创文章,作者:蓝洛水深,如若转载,请注明出处:https://www.ilanluo.com/9325

发表评论

登录后才能评论