uniapp iframe 全屏显示

从网上抄了一份代码，用来反馈问题用。不要问为什么不做表单提交，问就是懒。哈哈哈。

代码如下：

<template>
    <view>

        <iframe class="web-view" :src='url' allow="fullscreen"></iframe>

    </view>
</template>

<script>
    export default {

        data() {

            return {

                url: 'https://h4ck.org.cn'

            }

        },

    }
</script>

<style>
    .container {
        display: flex;
        flex-direction: column;
        height: 100%;
        /* height : 100%;  // 自定义高度 */
        width: 100%;
        margin-top: 2rpx;
    }

    .web-view {
        flex-direction: column;
        height: 100%; 
        width: 100%;
        background-color: white;

    }
</style>

虽然都设置了 100% 但是实际的加载效果却是下面的样子：

当然作为一个非专业的前端程序媛，怎么写 css 是个大问题。于是换个思路，直接动态设置高度吧。

• 设置动态高度:style="{height: pageHeight+'px'}"

<iframe class="web-view" :src='url' :style="{height: pageHeight+'px'}" allow="fullscreen"></iframe>

• 获取当前页面高度：

onLoad() {
                    // 获取当前窗口高度
                    this.pageHeight = uni.getSystemInfoSync().windowHeight;
                            
                    // 监听窗口大小的变化
                    uni.onWindowResize((res) => {
                      this.pageHeight = res.size.windowHeight;
                    });
                },

现在看起来就 ok 啦

参考链接：

https://blog.csdn.net/qq_43483403/article/details/132143660