robbestad / react-iframe Goto Github PK
View Code? Open in Web Editor NEWSimple solution for using iframes in React
License: ISC License
Simple solution for using iframes in React
License: ISC License
How to use allowfullscreen?
In the native iframe we have something like this:
<iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe> We may want to include that to the module.I get these warnings when running my Iframe component with the corresponding 'allow' variables set.
Unrecognized origin: 'microphone'.
Unrecognized origin: 'camera'.
Unrecognized origin: 'midi'.
This is the iFrame generating the warnings:
<Iframe
url={pageUrl}
width="100%"
height="100%"
id={'iframe__' + props.id}
display="absolute"
position="relative"
frameBorder="0"
allow="microphone camera midi"
/>
I'm trying to understand why anyone would use this library, where they can simply use a plain <iframe />
.
What does this library do, apart from wrapping the iframe in a PureComponent
, and limiting support to only the defined properties?
Rendering the react-iframe adds to the history therefore breaks the back button. Is there anyway to not add to the history when switching between iframes?
Using react-iframe is throwing an error in Firefox:
Browser Error: SyntaxError: class is a reserved identifier
Takes me to this line :
const Iframe = class extends __WEBPACK_IMPORTED_MODULE_0_react__["PureComponent"] {
render() {
Related: #25
With latest releases, when running npm run build
for a CRA app it fails due to UglifyJS not supporting ES6 AFAICT. Working fine with (at least) version 1.1.0
.
Error log:
> [email protected] build /home/rof/src/github.com/HealthTree/healthtree-app
> react-scripts build
Creating an optimized production build...
Skipping static resource "/home/rof/src/github.com/HealthTree/healthtree-app/build/static/js/main.6557b736.js" (14.9 MB) - max size is 2.1 MB
Failed to compile.
static/js/main.6557b736.js from UglifyJs
Unexpected token: punc (,) [./~/react-iframe/dist/es/iframe.js:5,0][static/js/main.6557b736.js:166721,4]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/rof/.npm/_logs/2019-04-14T05_01_49_340Z-debug.log
React iframe displays blank page with base64 pdf data with IE 15 windows 10. I tested it with browserstack. If I supply a real pdf file, it will work in IE.
Here is my test project.
https://github.com/kenpeter/test_popup_iframe
Main code like this:
function App() {
const meta = 'data:application/pdf;base64,';
const data = meta +
'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G';
return (
<div className="App">
<Iframe src={data}
width="450px"
height="450px"
id="myId"
className="myClassname"
display="initial"
position="relative"/>
</div>
);
}
Google has recently deprecated permissions for access to user devices in cross-origin iframes. Please review this article: https://dev.chromium.org/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes#TOC-To-continue-to-use-permissions-from-iframes-on-your-website...
I have attempted to fork the project and add the attribute myself, compile it, and then reinstall the package from my GitHub instead of from NPM. But when I try to load it into an application I am working on and compile the app, it throws 50 errors to the browser console, like the code has not been transpiled. The only way I can get this package to work is to use the official one from NPM (which doesn't include "allow").
I can hack around this for this app (its a class project). But for future, would probably be a good idea to implement this attribute, if only for cross-browser support.
I'm using a ref with the Iframe:
<Iframe ref={this.myiframe} />
This use to work, but after updating some dependencies I'm getting the following error:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `Context.Consumer`.
in Iframe (created by Context.Consumer)
Some of my dependencies:
"react": "^16.8.6",
"react-iframe": "^1.8.0",
"styled-components": "^4.2.0",
The typescript definition for the sandbox
property is a list of possible string values.
I think it should just be a string
. Currently that does not allow you to specify multiple values such as:
sandbox="allow-forms allow-scripts"
Maybe there is another way to specify it and keep typescript happy?
In VS Code if I hover over the import statement I get this test in a popup:
Could not find a declaration file for module 'react-iframe'. 'c:/cloudguest/src/client-admin/react-material.eval/node_modules/react-iframe/index.min.js' implicitly has an 'any' type.
Try npm install @types/react-iframe
if it exists or add a new declaration (.d.ts) file containing declare module 'react-iframe';
ts(7016)
When I run I get an error:
Check your code at App.js:43.
in Route (at App.js:43)
in Switch (at App.js:40)
in div (at App.js:34)
in App (at src/index.js:9)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:8)
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
index.js:1452
Here is how I am trying to use it:
import { Iframe } from 'react-iframe';
<Route path="/api-docs-swagger" render={props => <Iframe url='/api-docs-swagger' />} />
Im using JSPM to package your module but it has problems doing so because package.json does not declare 'prop-types' or 'object-assign' as either dependencies or peerDependencies. This results in a runtime error loading your module because JSPM cant include undeclared dependencies without some extra JSPM override config.
Would you consider accepting a P.R to correct this?
With the release today get this error when creating an optimized build:
Failed to minify the code from this file:
../node_modules/react-iframe/index.js:5
Reproduce:
ReactDOM.render(
<Iframe url='https://www.test-cors.org/'
width='100%'
height='100%'
styles={{ borderWidth: '0' }}
position='relative'/>,
root
)
The result is an iframe with no "border-width" set, with an extra attribute styles="[object Object]"
When the parent component re-renders, the Iframe seems to reload the content. I don't want that behavior, any suggestions ?
I would like to override the iframe content styles? do we have an option to do so?
Hello! Thanks for creating this library :)
Just wanted to note that display="initial"
is part of the example in the README but in node_modules/react-iframe/types.d.ts
, typescript will complain that the display
attribute can only have "block" | "none" | "inline"
.
We have a requirement which has been exposed by the "axe" developer tool which shows that we have an issue with the iframe not including a title or label:
Issue description
Ensures <iframe> and elements contain a non-empty title attribute
Impact: serious
Element location
iframe
Element source
<iframe frameborder="0" src="<snip>" target="_parent" allowfullscreen="" height="100%" name="" width="100%" style="position: absolute; display: block; height: 100%; width: 100%;"></iframe>
To solve this violation, you need to:
Fix at least one (1) of these issues:
Would be good if, in the simplest case, an optional "title" attribute could be passed through into the HTML.
excuse me:How does this support headers authorization Basic login check
It looks like when trying to use this component in IE11 it throws errors for "SCRIPT438: Object doesn't support property or method 'assign' " which tracking down the issue means that it doesn't like Object.assign()
I found a workaround if you want to try it (if you really want to support IE11) to use the object-assign package here: https://github.com/sindresorhus/object-assign instead of the native Object.assign()
Can you please help me? IFrame only taking 100px instead of 100%
when I set style={{color: '#ddd'}}
it can't work
<Iframe url={day.desc_url} width="100%" height="600px" style={{color: '#ddd'}} position="relative" allowFullScreen/>
When content is longer than viewport, it is not scrollable on iOS safari. Works on Android and chrome desktop.
Hi, buddy, how to get onload event?
Importing react-iframe produces an error
Examples:
Testing on
https://runkit.com/npm/react-iframe
Produces two syntax errors:
SyntaxError: Unexpected token import
A stack trace for this error could not be retrieved because stack was already called.
Importing locally and attempting to run a file with the import using either
var Iframe = require('react-iframe');
import Iframe from 'react-iframe';
produces the following error:
index.js:1 Uncaught SyntaxError: Unexpected token import
It appears that the exported index.js does not supported IE11 usage, primarily from the class
declaration on line 5. Unfortunately, IE11 does not support ES6 classes: https://caniuse.com/#feat=es6-class
I've attempted replacing the index.js with code from the index.min.js and found that it works as intended. Would it be possible to change the deployed package to have an index.js that is the babelified / minified version and not the pure ES6 one?
In my component, trying
<Iframe
allowFullScreen
className="editor-frame"
id="editor-frame"
height="100%"
position="relative"
url={url}
width="100%"
/>
does not work
From what I can tell, the tool doesn't currently address page heights across different domains without specifically spelling it out in pixels manually (setting height="100%" doesn't work for cross-domain iframes). Are there any plans to address this? Thank you
the iframe has position fixed by default
I get this error when putting the example iframe into my web app (created using CRA):
Element ref was specified as a string (iframe) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a functional component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://fb.me/react-refs-must-have-owner for more information.
Code:
class DashboardView extends React.Component{
render() {
return(
<div>
<header className="App-header">
<h1 className="App-title">Welcome to my app</h1>
</header>
<p className="App-intro">
Go to <Link to="/something">Entity Curation</Link> to do stuff.
</p>
<Iframe url="http://www.youtube.com/embed/xDMP3i36naA"
width="450px"
height="450px"
id="myId"
className="myClassname"
display="initial"
position="relative"
allowFullScreen/>
</div>
);
}
}
Hey there, I'm just leaving this in case other people are running into the issue I was.
I was building a CRA app and trying to serve an html file in the /public dir like so
<Iframe url={"./public/myfile.html"} position="absolute" width="100%" height="100%" />
this worked fine when I was running create-react-app locally, but when I tried to serve the build with serve -s ./build
I got a weird error where it was serving the original index.html inside of the iframe instead of myfile.html
After some digging I realized that I needed to drop the -s
option!
-s, --single Rewrite all not-found requests to index.html
this worked just fine:
serve ./build
Cheers!
Hey,
I have tried this component and it works very well with YouTube links but I am trying to embed an HTML file that contains animation inside React using this component but it doesn't work as expected. Does anyone have any recommendations to overcome it?
https://addyosmani.com/blog/lazy-loading/
The loading
attribute can take the values auto,eager,lazy
, browsers that support the attribute may implicitly default to auto
to determine if they should use eager
or lazy
based on distance from viewport. The attribute communicates to the browser how important the image/iframe resource is to prioritize loading, potentially delaying it while it's not within a viewing distance from the current viewport.
Hi guys,
Can I add name somehow to iframe as an attribute(props)?
Thanks
Looking over the commit history to see what had changed since earlier this year. The CHANGELOG.md
(or releases page) isn't too useful since commit messages adding changes often either don't use the keywords it expects at all or uses them incorrectly(part of a chore for release).
You have a pattern of release commits sometimes 2-3 times in a row. Usually only the first may contain actual changes or be for a prior commit. The others just seem to be version bumps for no reason? Is this a bug with some release automation?
It would be very useful if there was an option to remove the scrollbar. Currently it is possible to hide overflow using the styles attribute, but there is a confusing scrollbar left behind. It shouldn't be too much work to get this working, just accept one more prop.
Hello, I am using your npm module to render youtube videos. Specifically when a user clicks on an image, a Bootstrap modal will pop up and play the youtube video, which is a form of lazy loading. Everything works great desktop wise.
This would be the modal element activated and using your module to render the corresponding music video:
However, the modal element is empty on a mobile device, meaning that the iframe component is not rendered. I was on my iphone using Safari, I'm not sure if it's a compatibility issue. Is there support for mobile devices at all (which would be necessary since everyone shifting away from desktop to mobile)
Thanks for any clarification!
*Side note as well: for some reason, allowFullScreen attribute does not seem to be working. I tried allowFullScreen on its own as a way of setting it, and allowFullScreen={"true"} as another way of setting it with JSX syntax
Is not respected.
It'd be great to be able to make use of HTML's postMessage
API to enable cross origin comms between the iFrame and the parent page. Particularly useful for the use of a lot of Payment forms where you need to securely pass some info between your page and the iFrame.
Might require some re-tooling to work with DOM and iFrame loading. Perhaps it could be an option in the onLoad function?
I need to isolate a component inside of an iframe, is this possible with this module?
React Native v0.57 has a new iOS 12 component <WebView useWebKit={true} source={{url: 'https://www.google.com'}} />
http://facebook.github.io/react-native/blog/2018/08/27/wkwebview
What are the advantages of using this module to create an iframe vs using the new WebView component?
I am trying to set
<IFrame style={{position: 'fixed', width: '100%', height: '100%', left: 0}} url={...} />
But its not applying
Hi, what about these properties?
I have used the Iframe component from React/iframe. Please resolve this issue;
I have an application using this component which renders a PDF inside an IFRAME. This component seems to set the sandbox
property (at least in Chrome) to be wide open:
sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation"
I had to remove this component and replace it with a basic HTML <iframe> tag to get the PDF to render so I could set the sandbox attribute to be blank.
Help?
Hi, when I try to render Iframe with HTML file in src director, it's renders iframe tag with my whole application.
it doesn't matter how I provide the path - src={'./test.html'} works exactly the same.
External links like url="http://www.youtube.com/embed/xDMP3i36naA" works fine
Is there any way currently otherwise any plan in the future to support / handle error of iframe loading better? For example, we have error such as: "Refused to display 'https://www.facebook.com/user.1683628638/posts/10153731529787012' in a frame because it set 'X-Frame-Options' to 'DENY'."
Thanks for any reply/workaround!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.