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. java1234教程系列笔记 S1 Java SE chapter 02 lesson 03 java基本数据类型

    第二章 第三节 数据类型 3.1 分类 基本数据类型.引用类型 3.2整型 byte 8 short 16 int  32 long 64 作业: A:1-10求和 B:float double 的最 ...

  2. winform上控件太多,绘制时会逐个出现,通常说双缓冲能解决但实际不能解决的问题的解决方法。

    protected override CreateParams CreateParams { get { CreateParams cp = base.CreateParams; cp.ExStyle ...

  3. Three.js开发指南---使用构建three.js的基本组件(第二章)

    .gui本章的主要内容 1 场景中使用哪些组件 2 几何图形和材质如何关联 3 正投影相机和透视相机的区别 一,Three所需要的基本元素 场景scene:一个容器,用来保存并跟踪所有我们想渲染的物体 ...

  4. 崽崽帮www.zaizaibang.com精选14

    [行走贵州]爽爽贵阳,乐活天堂! 北京儿童医院将建遗传代谢病专科医院 [山东十大最难懂方言]原来青岛话还是很好懂滴 ❤如果南宁的儿童医院长这样…… 成都三所小学入围中国百强小学名单 [乐湖新闻]学习中 ...

  5. Visual Studio Team System 2008 Team Suite(90 天试用版)

    安装完成后,在“控制面板”中启动“添加删除程序”,选中Vs2008,点击“更改.删除”,输入序列号:PYHYP-WXB3B-B2CCM-V9DX9-VDY8T

  6. 延时函数出错,volatile一例

    莫名其妙的错误.使用Systick做的延时. 初始化是这样的: //SysTick配置 SysTick_CLKSourceConfig(SysTick_CLKSource_HCLK_Div8); if ...

  7. (C++) Include 文件

    1. <> 和 "" 的区别. 2. 有个技巧就是把.h 文件放到 stdafx.h 中,这样很多时候,就不用重复的引用头文件了..因为 stdafx.h 基本上每个头 ...

  8. not子查询中有null值的时候 not in 会失效

    not in子查询中有null值的时候 not in 会失效 但是 in 的子查询中有null的 不会失效

  9. Oracle补习班第八天

    The best hearts are always the bravest. 心灵最高尚的人,也总是最勇敢的人. 1,权限.角色.与用户 创建用户 create user aa identified ...

  10. [MySQL] SqlServer 迁移到 MySQL 方法介绍

    一.原则: 只迁移表结构和数据,存储过程.函数.触发器尽量自己改写,并充分测试. 迁移前,先设置好数据库的一些参数,比如默认存储引擎,默认编码等,方便后续导入. 二.方法: 1.使用MySQL Wor ...