I have a fairly simple react component which contains an iFrame. This component will load files from the server but there is no response to click events with either anchor elements or buttons. There isn't any scripting on the rendered page (with the anchor - I added a simple script for the button clicks).
Here is my code for the iFrame component, the calling component and the page being rendered with the links
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>
Using the 'sendFile' router requisition function doesn't appear to set the content-type correctly. Although the page displays nothing functions. Using
res.contentType(mime.lookup(path)) //(mime-types npm package) to set the contentType header
res.send (readFileSync(path))
allows the document to function correctly.