• 实现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;

  • 相关阅读:
    uniapp 小程序全屏的实现
    element select失效问题 , vue刷新的两种方式
    正则表达式
    vue+element ui中select组件选择失效问题原因与解决方法
    java removeAll和重写equals、hashcode引起的性能问题
    hive sql取差集
    hive获取日期对应的星期
    Hive分组后取组内排名方法row_number
    用Apache Spark和TensorFlow进行的深度学习
    git从已有分支拉新分支开发
  • 原文地址:https://www.cnblogs.com/cxf520/p/6243115.html
Copyright © 2020-2023  润新知