Android Webview & iframe auto full screen

android webview iframe 全屏适配

https://stackoverflow.com/questions/50101902/webview-and-iframe-video-full-screen-issue

react native & webview

https://facebook.github.io/react-native/docs/webview

https://github.com/react-native-community/react-native-webview

https://www.tutorialspoint.com/react_native/react_native_webview.htm

deviceHeight &deviceWidth

import React, {Component} from "react";

import {

    StyleSheet,

    Dimensions,

    Text,

    View,

    WebView,

    Button,

} from "react-native";

let {

    height: deviceHeight,

    width: deviceWidth

} = Dimensions.get("window");




/**

 *

 * @author xgqfrms

 * @license MIT

 * @copyright xgqfrms

 *

 * @description NestedIframe

 * @augments

 * @example

 *

 */

import React, {Component} from "react";

import {

    StyleSheet,

    Dimensions,

    Text,

    View,

    WebView,

    Button,

} from "react-native";

// new

// import { WebView } from "react-native-webview";

let {

    height: deviceHeight,

    width: deviceWidth

} = Dimensions.get("window");

class NestedIframe extends Component {

    static navigationOptions = {

        title: "Iframe Screen",

    };

    constructor(props) {

        super(props);

        this.state = {

            // url: this.props.navigation.state.params.url,

            info: "url 不可为空!",

        };

        this.HTMLGenerator = this.HTMLGenerator.bind(this);

    }

    HTMLGenerator(uri = ``) {

        let html = ``;

        html += `

            <!DOCTYPE html>

            <html lang="zh-Hans">

            <head>

                <meta charset="UTF-8">

                <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,viewport-fit=cover" />

                <meta http-equiv="X-UA-Compatible" content="ie=edge">

                <meta name="author" content="xgqfrms">

                <meta name="generator" content="VS code">

                <title>eapp & iframe</title>

                <!-- CDN css -->

                <link rel="stylesheet" href="https://cdn.xgqfrms.xyz/iframe/eapp/css/common.css" />

                <link rel="stylesheet" href="https://cdn.xgqfrms.xyz/iframe/eapp/css/infoDetail.css" />

                <link rel="stylesheet" href="https://cdn.xgqfrms.xyz/iframe/eapp/css/dialog.css" />

            </head>

            <body>

                <div class="iframBox">

                    <iframe

                        id="iframes"

                        data-dom="iframe"

                        frameborder="0"

                        height="100%"

                        width="100%"

                        scrolling="yes"

                        src="${uri}"

                    ></iframe>

                </div>

            </body>

            </html>

        `;

        return html;

    }

    render() {

        let {

            navigate,

            state: {

                params: {

                    url,

                },

            },

        } = this.props.navigation;

        // let url = this.props.navigation.state.params.url;

        let {

            info,

        } = this.state;

        // let uri = url || "";

        // console.log(`uri =`, uri);

        // if (!uri) {

        //     uri = `https://cdn.xgqfrms.xyz`;

        // }

        // let html = this.HTMLGenerator(uri);

        //

        let uri = `https://i6lncuflx.lightyy.com/index.html#/index/home`;

        return (

            <View style={styles.container}>

                {

                    !uri

                    ?

                    <View>

                        <Text

                            style={{

                                color: "red",

                                fontSize: 18,

                                textAlign: "center",

                                marginTop: 50,

                            }}>

                            {/* {info} */}

                        </Text>

                        <Button

                            title="返回主页"

                            onPress={

                                () => navigate(

                                    "Home",

                                    {

                                        name: "xgqfrms",

                                    }

                                )

                            }

                        />

                    </View>

                    :

                    <Text

                        style={{

                            color: "#0f0",

                            fontSize: 12,

                            textAlign: "center",

                            marginTop: 10,

                        }}>

                        {uri}

                    </Text>

                }

                <WebView

                    bounces={false}

                    scalesPageToFit={true}

                    source={{

                        html: `

<!DOCTYPE html>

<html lang="zh-Hans">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,viewport-fit=cover" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="xgqfrms">

    <meta name="generator" content="VS code">

    <title>eapp & iframe</title>

    <style>

        //

    </style>

</head>

<body>

    <div class="iframBox">

        <iframe

            id="iframes"

            data-dom="iframe"

            frameborder="0"

            height="560px"

            width="400px"

            scrolling="yes"

            src="${uri}"

        ></iframe>

    </div>

</body>

</html>

                        `,

                        // `

                        //     <iframe

                        //         name="iframeWindow"

                        //         src="${uri}"

                        //         width="100%"

                        //         height="100%"

                        //         data-dom="iframe"

                        //         target="_self"

                        //         about:blank

                        //         style="border: 0px solid red;"

                        //     >

                        //     </iframe>

                        // `,

                    }}

                    style={{

                        width: deviceWidth,

                        height: deviceHeight,

                    }}>

                </WebView>

            </View>

        );

    }

}

// css-in-js

const styles = StyleSheet.create({

    container: {

        flex: 1,

        paddingTop: 0,

        marginTop: 0,

    }

});

export default NestedIframe;

export {

    NestedIframe,

};

WebView & iframe 自适应 全屏

https://www.cnblogs.com/renhui/p/5900295.html

https://hacpai.com/article/1519975549750

https://zhuanlan.zhihu.com/p/24990222

https://www.cnblogs.com/baihuaxiu/p/6654496.html

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

Android Webview & iframe auto full screen的更多相关文章

  1. Android WebView 开发教程

    声明在先:必须在AndroidMainfest.xml 里面声明权限,否则在Java里面编写的所有WebView浏览网页的代码都无法正常使用 <uses-permission android:n ...

  2. Android WebView 开发详解(二)

    转载请注明出处  http://blog.csdn.net/typename/article/details/39495409 powered by miechal zhao   概览: Androi ...

  3. webview之如何设计一个优雅健壮的Android WebView？（下）(转)

    转载:https://iluhcm.com/2018/02/27/design-an-elegant-and-powerful-android-webview-part-two/ (这篇文章写得有点晚 ...

  4. Android WebView 详解

    相关API 相关类介绍 WebResourceRequest 添加于API21,封装了一个Web资源的请求信息,包含:请求地址,请求方法,请求头,是否主框架,是否用户点击,是否重定向 WebResou ...

  5. 如何设计一个优雅健壮的Android WebView？（下）

    转:如何设计一个优雅健壮的Android WebView?(下) 前言 在上文<如何设计一个优雅健壮的Android WebView?(上)>中,笔者分析了国内WebView的现状,以及在 ...

  6. Android WebView学习

    Android WebView学习 文章来源:小小懒羊羊个人知识管理库 权限: <uses-permission android:name="android.permission.IN ...

  7. WebView & iframe

    WebView & iframe https://developer.android.com/reference/android/webkit/WebView.html Web-based c ...

  8. Android WebView 302斗争之旅

    一.背景 越来越多的业务接入,项目内多多少少会出现几个H5页面,只是单纯的提供WebView容器接入H5页面根本满足不了需求,他们需要登录态,需要制定协议控制Native的导航栏,或者需要JsBrid ...

  9. Android WebView useragent

    今天介绍一下Android WebView UserAgent, User-Agent(简称UA)是HTTP请求头部用来标识客户端信息的字符串, 包括操作系统, 浏览器等信息.为了建立手机客户端的信息 ...

随机推荐

  1. 研发流程 接口定义&开发&前后端联调 线上日志观察 模型变动

    阿里等大厂的研发流程,进去前先了解一下_我们一起进大厂 - SegmentFault 思否 https://segmentfault.com/a/1190000021831640 接口定义 测试用例评 ...

  2. 解决windows git乱码问题

    在windows中打开git bash git config --global i18n.commitencoding utf-8       设置提交日志使用utf-8 git config --g ...

  3. Linux的.a、.so和.o文件 windows下obj,lib,dll,exe的关系 动态库内存管理 动态链接库搜索顺序 符号解析和绑定 strlen函数的汇编实现分析

    Linux的.a..so和.o文件 - chlele0105的专栏 - CSDN博客 https://blog.csdn.net/chlele0105/article/details/23691147 ...

  4. Spring Cloud 2020.0.1 正式发布！真是头疼。。。

    上一篇:Spring Cloud 2020.0.0 正式发布,全新颠覆性版本! 号外!号外!号外! Spring Cloud 2020.0.0 在去年 12 月底,赶在一年的尾巴最后几天仓促发布了,时 ...

  5. LOJ10104Blockade

    POI 2008 Byteotia 城市有 n 个城镇,m 条双向道路.每条道路连接两个不同的城镇,没有重复的道路,所有城镇连通.输出 n 个数,代表如果把第i  个点去掉,将有多少对点不能互通. 输 ...

  6. Vue技术点整理-vue.config.js

    1,proxy代理解决本地开发环境跨域问题 配置proxy代理后,proxy会将任何未知请求 (没有匹配到静态文件的请求) 代理到 https://192.168.3.49:8080 vue.conf ...

  7. jQuery基础介绍

    最近在学习JavaScript,当学习Javascript之后,不得不学习的肯定是jQuery了,所以开始利用网络的便捷浏览各大博客寻找可学习的资源.这篇博客关于jQuery的学习让我有很多收获,也明 ...

  8. linux系统资源限制———ulimit命令

    简介 Linux ulimit命令用于控制shell程序的资源. ulimit为shell内建指令,可用来控制shell执行程序的资源 推荐:https://blog.csdn.net/skiwnc/ ...

  9. 从微信小程序到鸿蒙js开发【05】——tabs组件&每日新闻

    目录: 1.tabs, tab-bar, tab-content 2.tabs的事件处理 3.tabs实现的每日新闻 1.tabs, tab-bar, tab-content 上章说到,鸿蒙的list ...

  10. Codeforces Global Round 7 A. Bad Ugly Numbers（数学）

    题意: 给你一个 n,输出一个 n 位不含 0 且不被任一位整除的正数. 思路: 构造 233 或 899. #include <bits/stdc++.h> using namespac ...