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. 丢包 ICMP

    小结: 1.ICMP 常见网络丢包故障分析及处理 云极安 云极安 2019-12-25 我们在管理维护网络的过程中经常会遇到数据包丢失的现象.使用Ping命令进行连通性测试,则会发现Ping包延时远远 ...

  2. CSS补充2

    浮动是css里面布局最多的一个属性效果:两个元素并排了,并且两个元素都能够设置宽度和高度 四个特性: 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有"字围"效果 4. ...

  3. LOJ10141染色

    SDOI 2011 染色 给定一棵有 n 个节点的无根树和 m 个操作,操作共两类. 将节点 a 到节点 b 路径上的所有节点都染上颜色: 询问节点 a 到节点 b 路径上的颜色段数量,连续相同颜色的 ...

  4. SpringMVC听课笔记（SpringMVC 表单标签 & 处理静态资源）

    1.springmvc表单标签,可以快速开发,表单回显,但是感触不深 2.静态资源的获取,主要是要配置这个

  5. how2j SpringMVC学习心得

    http://how2j.cn/k/springmvc/springmvc-form/618.html 注意 addProduct.jsp 是放在了WebContent(即web目录)下,访问的时候, ...

  6. Spring,Spring MVC,MyBatis,Hibernate总结

    将之前学习的框架知识进行了UML图总结,若有错误或不当之处,劳烦朋友们指正,会及时作出修改和补充: [toc] Spring Spring MVC MyBatis,Hibernate

  7. 最短路-SPFA算法&Floyd算法

    SPFA算法 算法复杂度 SPFA 算法是 Bellman-Ford算法 的队列优化算法的别称,通常用于求含负权边的单源最短路径,以及判负权环. SPFA一般情况复杂度是O(m)最坏情况下复杂度和朴素 ...

  8. k倍区间（解题报告）前缀和简单应用

    测评地址 问题 1882: [蓝桥杯][2017年第八届真题]k倍区间 时间限制: 1Sec 内存限制: 128MB 提交: 351 解决: 78 题目描述 给定一个长度为N的数列,A1, A2, . ...

  9. 整体算力提升40% 芯片级安全防护 | 阿里云发布第七代ECS云服务器

    2 月 8 日,阿里云宣布推出第七代 ECS 云服务器产品家族,基于最新的神龙架构,相较于上一代整体算力提升 40%,容器部署密度最大可提升 6 倍,是最佳的云原生载体,此外全量搭载安全芯片,实现&q ...

  10. 或许你知道Python的shell，那jshell呢？

    Java 10以后,java官方推出了类似python的shell操作的jshell,你的指令可以及时反馈,对于新手学习而言非常有用.如果你和我一样刚学Java,建议你使用高版本,和我一起开始使用js ...