Javascript 在Iframe中禁用右键单击（ReactJS）

我有个问题。 当我们在ReactJS中的Iframe页面内时，如何禁用右键单击？ 因为当有人使用鼠标右键单击并在我的iFrame中的一个新选项卡中打开时，URL中包含的所有数据都将可见。因此，我想禁用右键单击，这样用户就看不到该URL上的数据

以下是其中一个Iframe页面中的脚本：

import React, { Component, Fragment } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Iframe from 'react-iframe'
import '../NewCases/NewCases.css'
import user2 from '../../images/user2.png';
import Axios from 'axios';
import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';
import ClickOutside from '../../components/ClickOutside';

import '@trendmicro/react-sidenav/dist/react-sidenav.css';

const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

class ReportPages extends Component {


    constructor(props) {
        super(props)
        this.state = {
            username: sessionStorage.getItem("username"),
            token: sessionStorage.getItem("access_token"),
            group: sessionStorage.getItem("group"),
            departemen: sessionStorage.getItem("departemen"),
            nip: sessionStorage.getItem("nip"),
            dataSess: [],
            datauser: [],
            uid: sessionStorage.getItem("app_uid"),

        }
    }

    componentDidMount() {
        if (window.sessionStorage.getItem("access_token") === null) {
            this.props.history.push('/');
        }
        Axios.get('https://**********.**********.or.id/api/1.0/***********/extrarest/session-id',
            {
                headers: {
                    'Content-Type': 'application/json',
                    'Accept-Encoding': 'gzip, deflate, br',
                    'Connection': 'Keep-Alive',
                    'Authorization': 'Bearer ' + this.state.token,
                },
                credentials: "same-origin",
            })
            .then((result) => {
                console.log(result.data);
                this.setState({
                    dataSess: result.data
                })
            })

        fetch("https://******.*********.or.id/api/1.0/**********/extrarest/login-user", {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept-Encoding': 'gzip, deflate',
                'Authorization': 'Bearer ' + this.state.token,
            }
        }).then(result => result.json()).then(resultJSON => {
            console.log(resultJSON)
            this.setState({
                datauser: resultJSON
            })
            this.getUserRole(this.state.datauser.uid);
        })
    }

    getUserRole = (uid) => {
        fetch("https://*****.*************.or.id/api/1.0/**********/user/" + uid, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept-Encoding': 'gzip, deflate',
                'Authorization': 'Bearer ' + this.state.token,
            }
        }).then(result => result.json()).then(resultJSON => {
            if (resultJSON.usr_role == "PROCESSMAKER_ADMIN") {
                this.setState({ user_role: 'Administrator' })
            } else if (resultJSON.usr_role == "PROCESSMAKER_OPERATOR") {
                this.setState({ user_role: 'Operator' })
            } else if (resultJSON.usr_role == "PROCESSMAKER_MANAGER") {
                this.setState({ user_role: 'Manager' })
            }
        })
    }

    content() {
        if (isChrome) {
            return (
                <div>
                    <Iframe src={`https://*******.**********.or.id/birt/run?__report=1ReportIntroWin.rptdesign&Group=${this.state.group}&Departemen=${this.state.departemen}&NIP=${this.state.nip}`}
                        width="80%"
                        height="100%"
                        position="fixed" />
                </div>
            )
        }
        else {
            return (
                <div>
                    <Iframe src={`https://*****.************.or.id/birt/run?__report=1ReportIntroWin.rptdesign&Group=${this.state.group}&Departemen=${this.state.departemen}&NIP=${this.state.nip}`}
                        width="95.5%"
                        height="92%"
                        position="fixed" />
                </div>
            )
        }
    }



    render() {
        console.log("Props APP_UID : ", this.state.uid);
        console.log("Props Session ID : ", this.state.dataSess);
        return (
            <Fragment>
                <ClickOutside
                    onClickOutside={() => {
                        this.setState({ expanded: false });
                    }}
                >
                    <SideNav
                        expanded={this.state.expanded}
                        onToggle={(expanded) => {
                            this.setState({ expanded });
                        }}
                        onSelect={(selected) => {
                            if (selected === "") {
                                window.sessionStorage.clear();
                            }
                            const to = '/' + selected;
                            if (this.props.location.pathname !== to) {
                                this.props.history.push(to);
                            }
                        }}
                        style={{ backgroundColor: '#015c6f', position: 'absolute'}}
                    >
                        <SideNav.Toggle />
                        <SideNav.Nav>
                            <NavItem eventKey="newcases">
                                <NavIcon>
                                    <i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    New Cases
                            </NavText>
                            </NavItem>
                            <NavItem eventKey="inbox">
                                <NavIcon>
                                    <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    Inbox
                            </NavText>
                            </NavItem>
                            <NavItem eventKey="draft">
                                <NavIcon>
                                    <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    Draft
                            </NavText>
                            </NavItem>
                            <NavItem eventKey="report">
                                <NavIcon>
                                    <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    Report
                            </NavText>
                            </NavItem>
                            <NavItem eventKey="">
                                <NavIcon>
                                    <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    Log Out
                            </NavText>
                            </NavItem>
                        </SideNav.Nav>
                    </SideNav>
                </ClickOutside>
                <div className="background-nya">
                <div className="header2">
                    <Link style={{ textDecoration: 'none' }} to="/menu">
                        <p className="headerLabel-fix"> *********** </p>
                    </Link>
                    <p className="headerLabelUser"> {this.state.username} </p>
                    <p className="headerLabelPass"> {this.state.user_role} </p>
                    <img className="userIcon" src={user2} />
                </div>
                <div className="iframenya">
                    <br />
                    <br />
                    {this.content()}
                </div>
            </div>
            </Fragment>
            
        )

    }

}

export default ReportPages;

import React，{Component，Fragment}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“反应Iframe”导入Iframe
导入“../NewCases/NewCases.css”
从“../../images/user2.png”导入user2；
从“Axios”导入Axios；
从'@trendmicro/react SideNav'导入SideNav，{Toggle，Nav，NavItem，NavIcon，NavText}；
从“../../components/ClickOutside”导入ClickOutside；
导入“@trendmicro/react sidenav/dist/react sidenav.css”；
恒等色=！！window.chrome&（！！window.chrome.webstore | |！！window.chrome.runtime）；
类ReportPages扩展组件{
建造师（道具）{
超级（道具）
此.state={
用户名：sessionStorage.getItem（“用户名”），
令牌：sessionStorage.getItem（“访问令牌”），
组：sessionStorage.getItem（“组”），
部门：sessionStorage.getItem（“部门”），
nip:sessionStorage.getItem（“nip”），
数据量：[]，
数据用户：[]，
uid:sessionStorage.getItem（“应用程序uid”），
}
}
componentDidMount（）{
if（window.sessionStorage.getItem（“访问令牌”）==null）{
this.props.history.push（'/'）；
}
get（'https://***************或.id/api/1.0/***************/extrest/session id'，
{
标题：{
“内容类型”：“应用程序/json”，
“接受编码”：“gzip，deflate，br”，
“连接”：“保持活动状态”，
“授权”：“持有人”+this.state.token，
},
凭据：“相同来源”，
})
。然后（（结果）=>{
console.log（result.data）；
这是我的国家({
dataess:result.data
})
})
获取（“https://***************或.id/api/1.0/***********/extrest/login user”{
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
“接受编码”：“gzip，deflate”，
“授权”：“持有人”+this.state.token，
}
})。然后（result=>result.json（））。然后（resultJSON=>{
log（resultJSON）
这是我的国家({
datauser:resultJSON
})
this.getUserRole（this.state.datauser.uid）；
})
}
getUserRole=（uid）=>{
获取（“https://******************或.id/api/1.0/***************/user/”+uid{
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
“接受编码”：“gzip，deflate”，
“授权”：“持有人”+this.state.token，
}
})。然后（result=>result.json（））。然后（resultJSON=>{
if（resultJSON.usr_role==“PROCESSMAKER_ADMIN”）{
this.setState（{user_role:'Administrator'}）
}else if（resultJSON.usr_角色==“PROCESSMAKER_操作员”）{
this.setState（{user_role:'Operator'}）
}else if（resultJSON.usr_role==“PROCESSMAKER_MANAGER”）{
this.setState（{user_role:'Manager'}）
}
})
}
内容（）{
if（变色）{
返回(
)
}
否则{
返回(
)
}
}
render（）{
log（“Props APP_UID:，this.state.UID”）；
log（“Props会话ID:，this.state.dataess”）；
返回(
{
this.setState（{expanded:false}）；
}}
>
{
这个.setState（{expanded}）；
}}
onSelect={（已选）=>{
如果（选定==“”）{
window.sessionStorage.clear（）；
}
常数to='/'+已选定；
if（this.props.location.pathname！==to）{
这个。道具。历史。推（到）；
}
}}
样式={{背景颜色：'#015c6f'，位置：'绝对'}
>
新病例
收件箱
草稿
报告