iframe

YouTube Autoplay does not work with iFrame

It’s not working since April of 2018 because Google decided to give greater control of playback to users. You just need to add &mute=1 to your URL. Autoplay Policy Changes <iframe id=”existing-iframe-example” width=”640″ height=”360″ src=”https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&mute=1&enablejsapi=1″ frameborder=”0″ style=”border: solid 4px #37474F” ></iframe> Update : Audio/Video Updates in Chrome 73 Google said : Now that Progressive Web … Read more

Print iframe content in Opera and Chrome

This is a known bug in Opera. In addition to the above ideas for workarounds, you may want to play with something like this: var clone=document.documentElement.cloneNode(true) var win=window.open(‘about:blank’); win.document.replaceChild(clone, win.document.documentElement); win.print(); I have not tested this but it should create a copy of the page in a popup window and print it, without having to … Read more

Can Cross-Origin Resource Sharing headers authorize X-Domain IFRAME access?

CORS doesn’t let you do that, but you can use cross-document messaging to send strings between iframes and their parent windows even on different domains, and use that to communicate. Most browsers support this although Internet Explorer’s way differs from the others‘. Assuming what you want is to have the iframe announce to the parent … Read more

using postmessage to refresh iframe’s parent document

Use: window.parent.postMessage(‘Hello Parent Frame!’, ‘*’); Note the ‘*’ indicates “any origin”. You should replace this with the target origin if possible. In your parent frame you need: window.addEventListener(‘message’, receiveMessage, false); function receiveMessage(evt) { if (evt.origin === ‘http://my.iframe.org’) { alert(“got message: “+evt.data); } } Replace “my.iframe.org” with the origin of your iFrame. (You can skip the … Read more

google homepage will not load in an iframe

From http://msdn.microsoft.com/en-us/library/cc288472(v=vs.85).aspx#search Clickjacking Defense: Some hackers try to trick users into clicking buttons that appear to perform safe or harmless functions, but instead perform unrelated tasks. Clickjackers embed malicious code or “redress” the user interface by using transparent frames that overlay specific UI elements with misleading text and images. To help prevent clickjacking, Web site … Read more

Inserting the iframe into react component

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

Angular, onLoad function on an iFrame

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