为什么 React 中的 iFrame 不响应点击事件

Question

我有一个相当简单的反应组件，其中包含一个 iFrame。该组件将从服务器加载文件，但不会响应带有锚元素或按钮的单击事件。呈现的页面上没有任何脚本（带有锚点 - 我为按钮点击添加了一个简单的脚本）。

这是我的 iFrame 组件、调用组件和使用链接呈现的页面的代码

import React, { Component } from 'react';
/*
Required parameters
    url:  the address of the page to show in iFrame
    title:  the title of the item for the iFrame title
*/

class IFrameComponent extends Component {

  state = { contentHeight: 500 };

  handleResize = () => {
    const top=this.container.offsetTop;
    this.setState({contentHeight: (this.getWindowDimensions().height-(top+55))})
  };

  getWindowDimensions = () => {
    const { innerWidth: width, innerHeight: height } = window;
    
    return {
      width,
      height
    };
  }

  onLoad = () => {
    this.container.contentWindow.addEventListener('resize', this.handleResize);
    window.addEventListener('resize', this.handleResize)
    this.handleResize();
  }

  componentWillUnmount() {
    this.container.contentWindow.removeEventListener('resize', this.handleResize);
  }

  render() {
    const { contentHeight } = this.state;
    return (
      <iframe
        frameBorder="0"
        onLoad={this.onLoad}
        ref={(container) => { this.container = container; }}
        scrolling="no"
        src={this.props.url}
        style={{ width: '90%', margin:'5% auto', height: `${contentHeight}px`, zIndex:20000 }}
        height={contentHeight}
        title="Some Content"
      />
    );
  }
}

export default IFrameComponent;

import React from 'react'
import IFrameComponent from '../Elements/IFrameComponent';

const WorkplanFiles = ({ site }) => {
    let path=`${process.env.REACT_APP_HOST}/workplans/index.html`
    return <IFrameComponent url={path} title='' />
}

export default WorkplanFiles;

<html>

<head>
    <link href="/workplans/StyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        handleClick=(url)=>{
            alert(url)
            location.href=url;
        }
    </script>
</head>

<body>
    <div style="width:100%; text-align:center;">
        <p class="heading">MCA Workplans</p><br />
    </div>

    <div style="width:100%; text-align:center; z-index:5000">
        <table cellpadding="5" style="position:absolute">
            <tr>
                <td><button onClick='handleClick("/workplans/ASL_Final.htm")'>
                    ASL Work Plan</button></td>
                <td>
                    <button onClick='handleClick("/workplans/ASL_Workplan.pdf#ASL=Workplan")'>
                        <img src="/workplans/Adobe.jpg" class="pdfLogo">
                    </button>
                </td>
                <td><button onClick='handleClick("/workplans/narratives/ASL_Narrative.pdf")'>
                    Narrative</button></td>
            </tr>
            <tr>
                <td><button onClick='handleClick("/workplans/Cable-ISP Workplan.htm")'>
                    Cable/ISP Work Plan</button></td>
                <td>
                    <button onClick='handleClick("/workplans/Cable_Workplan.pdf#Cable=Workplan")'>
                        <img src="/workplans/Adobe.jpg" class="pdfLogo">
                    </button>
                </td>
                <td><button onClick='handleClick("/workplans/narratives/Cable_Narrative.pdf")'>
                    Narrative</button></td>
            </tr>
            <tr>
                <td><button onClick='handleClick("/workplans/Rogers Global v.1.4.htm")'>
                    Rogers Work Plan</button></td>
                <td>
                    <button onClick='handleClick("/workplans/Rogers_Flowchart.pdf#Rogers=Workplan")'>
                        <img src="/workplans/Adobe.jpg" class="pdfLogo">
                    </button>
                </td>
                <td><button onClick='handleClick("/workplans/narratives/Rogers_Narrative.pdf")'>
                    Narrative</button></td>
            </tr>
            <tr>
                <td><button onClick='handleClick("/workplans/TMI Global.htm")'>
                    TMI Work Plan</button></td>
                <td>
                    <button onClick='handleClick("/workplans/TMI_Workplan.pdf#TMI=Workplan")'>
                        <img src="/workplans/Adobe.jpg" class="pdfLogo">
                    </button>
                </td>
                <td><button onClick='handleClick("/workplans/narratives/TMI_Narrative.pdf")'>
                    Narrative</button></td>
            </tr>
            <tr>
                <td><button onClick='handleClick("/workplans/Bell Global.htm")'>
                    Bell Work Plan</button></td>
                <td>
                    <button onClick='handleClick("/workplans/Bell_Workplan.pdf#BELL=Workplan")'>
                        <img src="/workplans/Adobe.jpg" class="pdfLogo">
                    </button>
                </td>
                <td><button onClick='handleClick("/workplans/narratives/Bell_Narrative.pdf")'>
                    Narrative</button></td>
            </tr>
            <tr>
                <td><button onClick='handleClick("/workplans/Bell 2nds V.2.htm")'>
                    Bell 2nd Placements</button></td>
                <td>
                    <button onClick='handleClick("/workplans/Bell 2nds.pdf#BELL=Workplan")'>
                        <img src="/workplans/Adobe.jpg" class="pdfLogo">
                    </button>
                </td>
                <td></td>
            </tr>
            <tr>
                <td><button onClick='handleClick("/workplans/TCI Workplan.htm")'>
                    TCI Work Plan</button></td>
                <td>
                    <button onClick='handleClick("/workplans/TCI Workplan.pdf#TCI=Workplan")'>
                        <img src="/workplans/Adobe.jpg" class="pdfLogo">
                    </button>
                </td>
                <td><button onClick='handleClick("/workplans/narratives/TCI_Narrative.pdf")'>
                    Narrative</button></td>
            </tr>
            <tr>
                <td><button onClick='handleClick("/workplans/CIT Workplan V.1.htm")'>
                    CIT Work Plan</button></td>
                <td>
                    <button onClick='handleClick("/workplans/CIT Workplan.pdf#CIT=Workplan")'>
                        <img src="/workplans/Adobe.jpg" class="pdfLogo">
                    </button>
                </td>
                <td><button onClick='handleClick("/workplans/narratives/CIT_Narrative.pdf")'>
                    Narrative</button></td>
            </tr>
            <tr>
                <td><button onClick='handleClick("/workplans/Basic Work plan (Preferred).htm")'>
                    Preferred Work Plan</button></td>
                <td>
                    <button onClick='handleClick("/workplans/Basic Work plan (Starchoice).pdf#Preferred=Workplan")'>
                        <img src="/workplans/Adobe.jpg" class="pdfLogo">
                    </button>
                </td>
                <td></td>

            </tr>
            <tr>
                <td><button onClick='handleClick("/workplans/Basic Work plan (Starchoice).htm")'>
                    Starchoice Work Plan</button></td>
                <td>
                    <button onClick='handleClick("/workplans/Basic Work plan (Starchoice).pdf#Starchoice=Workplan")'>
                        <img src="/workplans/Adobe.jpg" class="pdfLogo">
                    </button>
                </td>
                <td></td>
            </tr>

        </table>
    </div>
</body>

</html>

Answer 1

使用 'sendFile' 路由器申请功能似乎无法正确设置 content-type。虽然页面显示没有任何功能。使用

res.contentType(mime.lookup(path)) //(mime-types npm package) to set the contentType header
res.send (readFileSync(path))

允许文档正常运行。

为什么 React 中的 iFrame 不响应点击事件

Why does iFrame in React not respond to click events

iframe

reactjs