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. Hive常用日期格式转换

    固定日期转换成时间戳 select unix_timestamp('2016-08-16','yyyy-MM-dd') --1471276800 select unix_timestamp('2016 ...

  2. OPTIONS的预请求(Preflighted Request)

    OPTIONS的预请求(Preflighted Request) Ajax 请求中出现OPTIONS(Request Method: OPTIONS)_qiao-CSDN博客 https://blog ...

  3. (转载)微软数据挖掘算法:Microsoft 目录篇

    本系列文章主要是涉及内容为微软商业智能(BI)中一系列数据挖掘算法的总结,其中涵盖各个算法的特点.应用场景.准确性验证以及结果预测操作等,所采用的案例数据库为微软的官方数据仓库案例(Adventure ...

  4. java线程缓存刷新的疑问

    https://www.jianshu.com/p/3c06ffbf0d52 import java.util.concurrent.TimeUnit; public class VolatileFo ...

  5. java 对象之间的复制

    package com.jy.demo.web; import java.util.Date; public class People { private String name;//姓名 priva ...

  6. 从NMEA0183到GNSS定位数据获取（二）软件篇

    作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:Conscience_Remains 总述 GPS我们都知道,一种用来全球定位的系统,后来俄罗斯推出了格洛纳斯定位系统,中国推出了北斗定位,欧盟有 ...

  7. UVA1401 Remember the Word 字典树维护dp

    题目链接:https://vjudge.net/problem/UVA-1401 题目: Neal is very curious about combinatorial problems, and ...

  8. 【bzoj 1202】[HNOI2005] 狡猾的商人（图论--带权并查集+前缀和）

    题意:一个账本记录了N个月以来的收入情况,现在有一个侦探员不同时间偷看到M段时间内的总收入,问这个账本是否为假账. 解法:带权并查集+前缀和.   判断账本真假是通过之前可算到的答案与当前读入的值是否 ...

  9. Educational Codeforces Round 94 (Rated for Div. 2) D. Zigzags (枚举,前缀和)

    题意:有一长度为\(n(4\le n\le 3000)\)的数组,选择四个位置\((i,j,k,l)\ (1\le i<j<k\le n)\),使得\(a_i=a_k\)并且\(a_j=a ...

  10. Python 闭包及装饰器

    闭包是指延伸了作用域的函数. 自由变量(free variable) 指未在本地作用域中绑定的变量 函数装饰器用于在源码中标记函数, 以某种方式增强函数的行为. 装饰器实质,把被装饰的函数替换为新函数 ...