Android Webview & iframe auto full screen

最新推荐文章于 2021-05-30 12:39:34 发布

weixin_30446197

最新推荐文章于 2021-05-30 12:39:34 发布

阅读量378

点赞数

文章标签：移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/xgqfrms/p/10831244.html

版权

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,
};