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

☆版权☆

* 网站名称:obaby@mars
* 网址:https://h4ck.org.cn/
* 个性:https://oba.by/
* 本文标题: 《uniapp iframe 全屏显示》
* 本文链接:https://image.h4ck.org.cn/2023/10/13918
* 短链接:https://oba.by/?p=13918
* 转载文章请标明文章来源,原文标题以及原文链接。请遵从 《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。


You may also like

6 comments

  1.   Level 6
    Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn浙江省杭州市 华数

    我作为后端出身,写前端也是东拼西凑,然后炫技,然后咔咔咔一顿改回第一版。

    1. 公主 Queen 
      Google Chrome 116 Google Chrome 116 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 移动

      我的要求很简单,能达到目标就 ok 了。所以这个项目目前前端代码写的非常乱,非常拉跨。哈哈哈。

    1. 公主 Queen 
      Google Chrome 116 Google Chrome 116 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 移动

      是哒,也可以的。不过这个没什么太大意义,还不如直接在桌面创建个快捷方式或者 weblink 。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注