我有一个相当简单的react组件，它包含一个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>
使用"sendFile"路由器请求函数似乎无法正确设置内容类型。尽管页面上没有显示任何功能。使用
res.contentType(mime.lookup(path)) //(mime-types npm package) to set the contentType header
res.send (readFileSync(path))
允许文档正确运行。