实现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时并非真正的"全屏显示",因为顶部的状态栏并没有被隐藏,比如下面 ...
随机推荐
- Python单元测试和Mock测试
单元测试 测试可以保证你的代码在一系列给定条件下正常工作 测试允许人们确保对代码的改动不会破坏现有的功能 测试迫使人们在不寻常条件的情况下思考代码,这可能会揭示出逻辑错误 良好的测试要求模块化,解耦代 ...
- windows下安装boost库
工作中现在会接触boost,所以我计划两个月之内努力熟悉一下boost.今天在自己win10系统上尝试安装了boost库,下面把遇到的问题总结一下: 1. 下好1.61版本库,在boost目录下运行b ...
- mybatis实战教程(mybatis in action)之七:实现mybatis分页
上一篇文章里已经讲到了mybatis与spring MVC的集成,并且做了一个列表展示,显示出所有article 列表,但没有用到分页,在实际的项目中,分页是肯定需要的.而且是物理分页,不是内存分页. ...
- MyBatis入门学习教程-MyBatis缓存
一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了 package me.gacl.test; 2 import me.gacl.domain.User; import ...
- Mysql无法创建外键的原因
在Mysql中创建外键时,经常会遇到问题而失败,这是因为Mysql中还有很多细节需要我们去留意,我自己总结并查阅资料后列出了以下几种常见原因. 1. 两个字段的类型或者大小不严格匹配.例如,如果一个 ...
- Xposed Module开发教程1
看了一下文档,发现Xposed这货实在太强大了,它直接对Zygote做了一些手脚,简直是无所不能.缺点就是需要安装一下框架.基本原理就是把Android 系统的app_process给替换了,然后启动 ...
- 64位Windows2008下插入Oracle中文乱码问题解决
最近迁移一个.net应用系统从32位Windows2003升级到64位的Windows2008中,发现所有涉及中文的内容插入到Oracle数据库中都变为?,最开始以为是2008系统的字符集与Oracl ...
- 关于MySql 关键字与字段名冲突 的问题
我在用mysql创建数据表时,其中一个表怎么创建都提示失败,最终我把语句翻来覆去折腾了许多遍之后发现原来我的一个字段值的名称为order的字段出了问题,把它去了就好了,最后结论就是设置字段值名称时不要 ...
- MVC图片验证码
C#类库: public class YZM { public string YZMcode = String.Empty; public byte[] load() { Bitmap bit = , ...
- eclipse中 报出The type javax.servlet.http.HttpServlet cannot be resolved. It is indirect错误
在Myeclispe部署项目后 报错 The type javax.servlet.http.HttpServlet cannot be resolved. It is indirect错误 如果在M ...