Menu
how can i require html from public/ with iframe?
my code like this:
import React, {Component} from 'react';
import Iframe from './IframeComm';
class App extends Component {
render() {
return (
<div className="App">
<h1>react</h1>
<Iframe
attributes={
{
src: '/test/test.html',
style: {
border: '10px solid red'
},
}
}
/>
</div>
);
}
}
export default App;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
iframe
</body>
</html>
when i usenpm start,everything allright
but when i use npm run build
toc:
how can i fixed this?thanks.
300
React Iframe. Simple React component for including an iframed page. The component is fully typescript-supported. Usage
In a Nutshell, Iframes allow you to embed content from other websites into yours. When looking at the history, an “Inline frame” called Iframe was introduced in 1997 with HTML 4.01 by Microsoft Internet Explorer. First and foremost, let’s look at how to embed an Iframe in a React project.
Having a CSP is a great defense for your React app against cross-site scripting attacks. Unfortunately, there aren’t any restrictions we can enforce using CSP for the content loaded inside Iframes. However, a working draft by W3C allows the embedding site to propose a CSP for the Iframe by setting an attribute on it.
Therefore, neither the parent component’s CSS styling nor its JavaScript will have any effect on the iframe. In React, developers use iframes to create either a sandboxed component or an application that is isolated from its parent component.
You can simply create a new component that take source and return with Iframe;
iframe.js
import React from 'react';
const Iframe = ({ source }) => {
if (!source) {
return <div>Loading...</div>;
}
const src = source;
return (
// basic bootstrap classes. you can change with yours.
<div className="col-md-12">
<div className="emdeb-responsive">
<iframe src={src}></iframe>
</div>
</div>
);
};
export default Iframe;
Then you can simply call that component like;
import React, {Component} from 'react';
import Iframe from './components/iframe.js';
class App extends Component {
constructor(props) {
super(props);
this.state = {
src: '/test/test.html'
};
}
render() {
return (
<div className="App">
<h1>react</h1>
<Iframe source={this.state.src} />
</div>
);
}
}
export default App;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
