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,
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,
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={{
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 发布文章使用：只允许注册用户才可以访问！