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

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

在上图中，我们给的代码是：

<iframe style="width: 100%; height:100%;" src="https://720yun.com/t/2avks71l7pe?scene_id=47915354" frameborder="no"></iframe>

1	<iframe style="width: 100%; height:100%;" src="https://720yun.com/t/2avks71l7pe?scene_id=47915354" frameborder="no"></iframe>

其中的width和height都设置的是100%，但事与愿违，在页面上并不能正常的显示到100%。

原因

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

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

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

弯路

起初我是这样写的

<script>
$(function(){
var min_height = $("#wrap").css('min-height');
 console.log(min_height);
 $("#quanjing").css('min-height',min_height);
            })
</script>

$(function(){

var min_height = $("#wrap").css('min-height');

console.log(min_height);

$("#quanjing").css('min-height',min_height);

})

</script>

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

教程

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

<script type="text/javascript" src="http://www.gzhpw.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp" id="jquery-js"></script>

1	<script type="text/javascript" src="http://www.gzhpw.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp" id="jquery-js"></script>

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

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

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<div id="quanjing" style="width:100%;" >
	<iframe style="width: 100%; height:100%;" src="https://720yun.com/t/2avks71l7pe?scene_id=47915354" frameborder="no"></iframe>
</div>

</div>

如上，我们将Iframe放在ID为quanjing的DIV中，这样我们操作JS代码时候，可以这样写

<script>
$(function(){
var min_height = $("#wrap").css('min-height');
 console.log(min_height);
 $("#quanjing").css('height',min_height);
            })
</script>