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 全屏显示的更多相关文章

  1. iframe全屏显示

    <iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=" ...

  2. 全屏显示网页FULLSCREEN API

    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...

  3. Adobe Flex迷你教程 —Flex4全屏显示

    应用场景 1.播放器 我们经常看视频的时候,需要全屏显示,(在flex中这个视频初始化的时候是嵌入到html的iframe中). 2.监控 如下图所示,大多时候我们的监控用的是flex,而树形菜单和标 ...

  4. JavaScript:让浏览器全屏显示

    并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  5. 在VC++6.0开发中实现全屏显示

    全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态. ...

  6. Android 全屏显示的方法(不包含状态栏)

    我们都知道在Android中某些功能的实现往往有两种方法:一种是在xml文件中设置相应属性,另一种是用代码实现.同样Android实现全屏显示也可以通过这两种方法实现: 1.在AndroidManif ...

  7. Android 全屏显示

    Android全屏显示: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...

  8. QT5中全屏显示子窗口和取消全屏的方法

    问题描述:用QT5做了个MDI多窗体应用程序,想把子窗体全屏显示,用网上的方法,但总是遇到问题. 网上的解决方法原文在这:http://www.cnblogs.com/Rick-w/archive/2 ...

  9. 启动app时全屏显示Default.png

    一直很喜欢MJ的讲课视频,今天看了他的博客学到了些东西顺便记录下来. 在默认情况下,app显示Default.png时并非真正的"全屏显示",因为顶部的状态栏并没有被隐藏,比如下面 ...

随机推荐

  1. MySQL Innodb数据库性能实践——热点数据性能

    摘要: 对于大部分的应用来说,都存在热点数据的访问,即:某些数据在一定时间内的访问频率要远远高于其它数据. 常见的热点数据有“最新的新闻”.“最热门的新闻”.“下载量最大”的电影等. 为了了解MySQ ...

  2. PHP 获取指定目录下所有文件(包含子目录)

    PHP 获取指定目录下所有文件(包含子目录) //glob — 寻找与模式匹配的文件路径 $filter_dir = array('CVS', 'templates_c', 'log', 'img', ...

  3. Maven项目java.lang.NoClassDefFoundError: Lorg/apache/log4j/Logger报错

    本文转载自:http://www.javaweb1024.com/info/894.jspx maven管理的项目,里面已经引入了log4j的包 maven引入如下: <dependency&g ...

  4. [Maven]Maven详解

    转自:http://www.cnblogs.com/hongwz/p/5456578.html 一.前言     以前做过的项目中,没有真正的使用过Maven,只知道其名声很大,其作用是用来管理jar ...

  5. 独自handle一个数据库大程有感

    这学期数据库课程,最后的大程是写一个MiniSQL的数据库实现,要求很简单,建删表,建删单值索引,支持主键和unique定义,支持最简单的select,只要支持3个类型:int,float,char( ...

  6. PL/SQLDeveloper导入导出Oracle数据库方法

    前一篇博客介绍了Navicat工具备份Oracle的方法,这篇博客介绍一下使用PL/SQL Developer工具导入导出Oracle数据库的方法. PL/SQL Developer是Oracle数据 ...

  7. JSTL 核心标签库 使用

    JSTL 核心标签库标签共有13个,功能上分为4类: 1.表达式控制标签:out.set.remove.catch 2.流程控制标签:if.choose.when.otherwise 3.循环标签:f ...

  8. 如何在Visual Studio里面查看程序的汇编代码?

    开发工具:Visual Studio 2015 1,在源代码中设置至少一个断点,目的让我们进入调试模式. 2,启动调试,当程序进入调试模式,停留在我们设定的断点处时候,使用快捷键"ALT+8 ...

  9. 锋利的jQuery学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  10. Unity3D人物头顶名称与血条更新与绘制

    using UnityEngine; using System.Collections; public class NPC : MonoBehaviour { //主摄像机对象 private Cam ...