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. 向同一个模型的外键反向关联名称产生了冲突 Django迁移

    向同一个模型的外键反向关联名称产生了冲突 一个模型中有两个外键指向同一张表时,创建迁移模型时报错:" HINT: Add or change a related_name argument ...

  2. LOJ10144宠物收养所

    HNOI 2004 最近,阿 Q 开了一间宠物收养所.收养所提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠物,阿 Q 根据领养者的要求通过他自己发明的 ...

  3. vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser错误

    ie浏览器下报错 vue刚搭建的项目,在谷歌浏览器能够正常访问,但是在ie11等ie浏览器下无法显示页面,打开控制台查看无报错信息,打开仿真一栏,提示[vuex] vuex requires a Pr ...

  4. juniper srx系列配置端口映射 转载

    http://www.cnblogs.com/pinpin/p/9895815.html

  5. Django（图书管理系统）#转

    自己虽然实现了, 但是写的太LOW了,为了不误导大家,推荐一篇好的博客 https://www.cnblogs.com/alice-bj/p/9114084.html

  6. 深入理解 ProtoBuf 原理与工程实践（概述）

    ProtoBuf 作为一种跨平台.语言无关.可扩展的序列化结构数据的方法,已广泛应用于网络数据交换及存储.随着互联网的发展,系统的异构性会愈发突出,跨语言的需求会愈加明显,同时 gRPC 也大有取代R ...

  7. DEDECMS：安装百度UEDITOR编辑器

    第一步:下载相对应编辑器的版本 首先,去百度搜索"百度ueditor编辑器",然后点击进入官网,找到下载页面.找到我们想要的编辑器的版本,看自己网站的编码是UTF-8还是GBK,下 ...

  8. sql如何查询数据库最后10条记录并正序输出

    select * from (select * from 表名 order by 字段 desc limit 10) 临时表 order by 字段

  9. Kwp2000协议的应用（程序原理篇）

    作者:良知犹存 转载授权以及围观:欢迎添加微信:becom_me 总述     接上篇文章Kwp2000协议的应用(硬件原理使用篇),本篇针对kwp2000协议标准的服务ID详细介绍,以及针对程序实现 ...

  10. Kubernetes-5-2：Harbor仓库的几种高可用方案与搭建

    高可用Harbor搭建 思路及介绍 Harbor官方有推出主从架构和双主架构来实现Harbor的高可用及数据备份.   一.主从架构:  说白了,就是往一台Harbor仓库中push镜像,然后再通过这 ...