If you don’t want to use dangerouslySetInnerHTML then you can use the below mentioned solution 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’) ); here live demo is available Demo
Commenting on a year old question. For cases where there are more than 1 iframes, I needed to bind “onload” events on to. I did this approach. Directive APP.directive(‘iframeOnload’, [function(){ return { scope: { callBack: ‘&iframeOnload’ }, link: function(scope, element, attrs){ element.on(‘load’, function(){ return scope.callBack(); }) } }}]) Controller APP.controller(‘MyController’, [‘$scope’, function($scope){ $scope.iframeLoadedCallBack = function(){ … Read more
In Greasemonkey (And Tampermonkey and most userscript engines) a script will fire on an iframe automatically if it meets the @include, @exclude, and/or @match directives. And, a popular question is how to stop Greasemonkey from firing on iframes. So, if your script had a match like: @match https://fiddle.jshell.net/* It would fire on jsFiddle “output” pages … Read more
You have three alternatives: 1. Use iFrame-resizer This is a simple library for keeping iFrames sized to their content. It uses the PostMessage and MutationObserver APIs, with fall backs for IE8-10. It also has options for the content page to request the containing iFrame is a certain size and can also close the iFrame when … Read more
Use the code in this way <div style=”overflow:auto;-webkit-overflow-scrolling:touch”> <iframe style=”width:100%;height:600px” src=”www.iframe.com”></iframe> </div>
Use “all_frames”: true in your content script declaration to inject it into an iframe: “content_scripts”: [{ “matches”: [ “http://example.com/*” ], “js”: [ “content.js” ], “all_frames”: true }], To differentiate this iframe from normal tabs you can add a dummy parameter to the URL when you create the iframe e.g. http://example.com/?foo so you can match it … Read more
Your resource probably use a self-signed SSL certificate over HTTPS protocol. Chromium, so Google Chrome block by default this kind of resource considered unsecure. You can bypass this this way : Assuming your frame’s URL is https://www.domain.com, open a new tab in chrome and go to https://www.domain.com. Chrome will ask you to accept the SSL … Read more
Try adding ?wmode=opaque to the URL or &wmode=opaque if there already is a parameter. If it doesn’t work try this instead, &wmode=transparent which will work in IE browser as well.
I had a similar issue, where I was trying to display content from our own site in an iframe (as a lightbox-style dialog with Colorbox), and where we had an server-wide “X-Frame-Options SAMEORIGIN” header on the source server preventing it from loading on our test server. This doesn’t seem to be documented anywhere, but if … Read more