Insert an iframe into a response component

Question

I have a little problem. After requesting data from the service, I received the iframe code in response.

<iframe src="https://www.example.com/show?data..." width="540" height="450"></iframe> 

I would like to pass this as a property for my modal component and display it, but when I just {this.props.iframe} it in the render function, it explicitly displays it as a string.

What is the basic way to display it as html in a reaction?

Answer 1

You can use the dangerouslySetInnerHTML property like this

 const Component = React.createClass({ iframe: function () { return { __html: this.props.iframe } }, render: function() { return ( <div> <div dangerouslySetInnerHTML={ this.iframe() } /> </div> ); } }); const iframe = '<iframe src="https://www.example.com/show?data..." width="540" height="450"></iframe>'; ReactDOM.render( <Component iframe={iframe} />, document.getElementById('container') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"></div> 

you can also copy all attributes from a string (depending on the question, you get an iframe as a string from the server) that contains an <iframe> and pass it to a new <iframe> , for example

 /** * getAttrs * returns all attributes from TAG string * @return Object */ const getAttrs = (iframeTag) => { var doc = document.createElement('div'); doc.innerHTML = iframeTag; const iframe = doc.getElementsByTagName('iframe')[0]; return [].slice .call(iframe.attributes) .reduce((attrs, element) => { attrs[element.name] = element.value; return attrs; }, {}); } const Component = React.createClass({ render: function() { return ( <div> <iframe {...getAttrs(this.props.iframe) } /> </div> ); } }); const iframe = '<iframe src="https://www.example.com/show?data..." width="540" height="450"></iframe>'; ReactDOM.render( <Component iframe={iframe} />, document.getElementById('container') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"><div> 

Answer 2

If you do not want to use dangerouslySetInnerHTML, you can use the solution below

 var Iframe = React.createClass({ render: function() { return( <div> <iframe src={this.props.src} height={this.props.height} width={this.props.width}/> </div> ) } }); ReactDOM.render( <Iframe src="http://plnkr.co/" height="500" width="500"/>, document.getElementById('example') ); 

demo version is available here demo version

Answer 3

With ES6 you can now do it like this

Codepen URl sample for download

 const iframe = '<iframe height="265" style="width: 100%;" scrolling="no" title="fx." src="//codepen.io/ycw/embed/JqwbQw/?height=265&theme-id=0&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">See the Pen <a href="https://codepen.io/ycw/pen/JqwbQw/">fx.</a> by ycw(<a href="https://codepen.io/ycw">@ycw</a>) on <a href="https://codepen.io">CodePen</a>.</iframe>'; 

Functional component for loading Iframe

 function Iframe(props) { return (<div dangerouslySetInnerHTML={ {__html: props.iframe?props.iframe:""}} />); } 

Using:

 import React from "react"; import ReactDOM from "react-dom"; function App() { return ( <div className="App"> <h1>Iframe Demo</h1> <Iframe iframe={iframe} />, </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

Change to CodeSandbox:

https://codesandbox.io/s/react-iframe-demo-g3vst