实现iframe 全屏显示
componentDidMount(){
var elem = document.getElementById('iframe');;
var elem = document.getElementById("iframe");
requestFullScreen(elem);
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
console.log(requestMethod);
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
},
iframe设置属性 allowfullscreen="true"
var React = require('react');
import {Button} from 'antd';
var Iframe = React.createClass({
getInitialState(){
return {
src: ''
}
},
requestFullScreen:function(){
var element = document.getElementById("iframe");
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
console.log(requestMethod);
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
},
render()
{
var pathname= this.props.location.pathname;
console.log(pathname);
var src='';
if(pathname=='relationalDatabase'||pathname=="/relationalDatabase"){
src='http://10.248.26.205:8080/login.htm';
}else if(pathname=='zeppelin'||pathname=='/zeppelin'){
src='http://10.248.26.210:8080/#/';
}else if(pathname=='jupyter'||pathname=='/jupyter'){
src='http://10.248.26.207:8080/';
}else if(pathname=='rstudio'||pathname=='/rstudio'){
src='http://10.248.26.206:8080/';
}else if(pathname=='serviceInterface'||pathname=='/serviceInterface'){
src='http://10.248.26.212:8090/swagger-ui.html';
}else if(pathname=='messageMonitoring'||pathname=='/messageMonitoring'){
src='http://10.248.26.208:8083/';
}else if(pathname=='configurationManagement'||pathname=='/configurationManagement'){
src='http://10.248.26.205:3000/datasource';
} else if(pathname=='interactiveQuery'||pathname=='/interactiveQuery'){
src='http://10.248.26.204:8888/';
}else if(pathname=='componentMonitoring'||pathname=='/componentMonitoring'){
src='http://10.246.152.122:8080/';
}else if(pathname=='schedulingManagement'||pathname=='/schedulingManagement'){
src='http://10.248.26.204:11000/oozie/';
}else if(pathname=='serviceManagement'||pathname=='/serviceManagement'){
src='http://10.248.27.45:8080/dubbo-admin-2.8.4a/';
}else if(pathname=='zabbix'||pathname=='/zabbix'){
src='http://10.248.26.211/zabbix/index.php?enter=Sign in&name=Admin&password=zabbix';
}else if(pathname=='dataAcquisition'||pathname=='/dataAcquisition'){
src='http://10.248.26.204:8888/sqoop';
}
return (
<div>
<iframe id="iframe" scrolling="yes" style={{padding: 0, margin: 0, borderRadius: '5px',position:'absolute',left:'0px',top:'0px'}} width='100%' height='900px' frameBorder="0"
src={src} > </iframe>
<Button id='fullScreen' type="primary" onClick={this.requestFullScreen}>Primary</Button>
</div>
)
}
})
;
module.exports = Iframe;
实现iframe 全屏显示的更多相关文章
- iframe全屏显示
<iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=" ...
- 全屏显示网页FULLSCREEN API
第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...
- Adobe Flex迷你教程 —Flex4全屏显示
应用场景 1.播放器 我们经常看视频的时候,需要全屏显示,(在flex中这个视频初始化的时候是嵌入到html的iframe中). 2.监控 如下图所示,大多时候我们的监控用的是flex,而树形菜单和标 ...
- JavaScript:让浏览器全屏显示
并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
- 在VC++6.0开发中实现全屏显示
全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态. ...
- Android 全屏显示的方法(不包含状态栏)
我们都知道在Android中某些功能的实现往往有两种方法:一种是在xml文件中设置相应属性,另一种是用代码实现.同样Android实现全屏显示也可以通过这两种方法实现: 1.在AndroidManif ...
- Android 全屏显示
Android全屏显示: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...
- QT5中全屏显示子窗口和取消全屏的方法
问题描述:用QT5做了个MDI多窗体应用程序,想把子窗体全屏显示,用网上的方法,但总是遇到问题. 网上的解决方法原文在这:http://www.cnblogs.com/Rick-w/archive/2 ...
- 启动app时全屏显示Default.png
一直很喜欢MJ的讲课视频,今天看了他的博客学到了些东西顺便记录下来. 在默认情况下,app显示Default.png时并非真正的"全屏显示",因为顶部的状态栏并没有被隐藏,比如下面 ...
随机推荐
- 如何解决Oracle RAC 安装集群软件或数据库时无法自动识别节点
在节点一 grid用户下: $ORACLE_HOME=/u01/app/11.2.0/grid/ [grid@orarac1 /]$ cd /u01/app/11.2.0/grid/oui/bin [ ...
- web异常流量定位:iftop+tcpdump+wireshark
一个简单的运维小经验. 场景:web服务器出现异常流量,web集群内部交互出现大流量,需要定位具体的http请求,以便解决问题. 目的:找出产生大流量的具体http请求. 工具: ift ...
- springmvc配置servlet的拦截形式/*和/的区别
今天复制一个现有的spring-mvc的项目修改配置作为新的项目,结果悲剧了!遇到了一个小问题困扰了半天,找同事找总监都没有搞定,纠结了半天终于发现了问题所在,随笔记一下,所谓好记性不如烂博客嘛! 问 ...
- SQL:over partition by与group by 的区别
group by是对检索结果的保留行进行单纯分组,一般总爱和聚合函数一块用例如AVG(),COUNT(),max(),main()等一块用. partition by虽然也具有分组功能,但同时也具有其 ...
- 通过宏判断VS编译版本以及系统平台
MSC_VER 定义编译器的版本.下面是一些编译器版本的_MSC_VER值(参见扩展阅读中的参考文献2的链接) MSVC++ 12.0 _MSC_VER == 1800 (Visual Studio ...
- aar引用 no executable code found问题
主工程中 repositories { flatDir { dirs project(':trade_module').file('libs') }} dependencies { compile f ...
- shell程序设计
1.shell脚本的基本概念: (1)Shell执行的是称为shell程序,这些程序通常被称为脚本. (2)Shell是一个用户和系统间接口的程序,它允许用户向操作系统输入需要执行的命令. (3)sh ...
- background-position值为像素时的使用方法
以前一直都知道这个属性,但是每次使用的时候都是试来试去,感觉很麻烦,所以花了一点小时间研究了一下,很简单,跟大家分享一下. 此属性需要在background属性中使用,有关background属性的值 ...
- VBA_Excel_教程:Option,错误处理
Option Explicit '强制对模块内所有变量进行声明 Option Compare Text '字符串不区分大小写 '指定数组的第一个下标为1(只能指定0或1) Sub s1() On Er ...
- 实现类似QQ对话聊天功能脚本
var skin : GUISkin; var showChat = false;private var inputField = "";private var display = ...