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. 京东热 key 探测框架新版发布，单机 QPS 可达 35 万

    https://mp.weixin.qq.com/s/3URAvUF6zwxeF5Kkc1aWHA 京东热 key 探测框架新版发布,单机 QPS 可达 35 万 原创 Hollis Hollis 2 ...

  2. Server:www121 Server:www120 Server:NWS_SP 内容被散列，并在响应中放入Etag When to Use Entity-Tags and Last-Modified Dates

    1 Request URL:http://www.biyao.com/minisite/bzzx 2 Request Method:GET 3 Status Code:200 OK 4 Remote ...

  3. SO_REUSEPORT 使用

    https://www.cnblogs.com/Anker/p/7076537.html

  4. CF912A

    题意 你手里有 A 个黄水晶和 B 个蓝水晶,其中两个黄水晶可以造一个黄水晶球,三个蓝水晶可以造一个蓝水晶球,一黄一蓝两个水晶可以造一个绿水晶球. 现在你需要 x 个黄水晶球,y 个绿水晶球,z 个蓝 ...

  5. 向指定url发送Get/Post请求

    向指定url发送Get/Post请求 1.向指定url发送Get/Post请求 2.HttpUtil 工具类–向指定url发送Get/Post请求 1.向指定url发送Get/Post请求 impor ...

  6. 客户端，Scala：Spark查询Phoenix

    客户端,Scala:Spark查询Phoenix 1.pom.xml 2.配置文件 2.1config.properties 2.2MyConfig 3.entity实体(与phoenix中的tabl ...

  7. postfix “ Sender address rejected: not logged in”

      一.问题 先说一下问题,我们公司有两台邮件服务器,分别是不同的域名但是用的是同一个用户认证,最近老有人反应说,有匿名邮件就是通过类似这种网站,进行使用你们公司的SMTP邮件服务器进行发送垃圾邮件 ...

  8. Spring 启动脚本

    if [ $# != 3 ];then echo 'option-1: start,stop or restart.' echo 'option-2: 请传入jar路径' echo 'option-3 ...

  9. HDU - 2825 Wireless Password （AC自动机+状压DP）

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=2825 题意:给一些字符串,构造出长度为n的字符串,它至少包含k个所给字符串,求能构造出的个数. 题解: ...

  10. 怎样优化SQL

    [原则一:选择需要优化的SQL] 1,选择需要优化的SQL:不是所有的SQL都需要优化,在优化的过程中,首选更需要优化的SQL; 怎么选择?优先选择优化高并发低消耗的SQL: 1,1小时请求1W次,1 ...