The below only works if the iframe content is from the same parent domain. The following jquery script works for me. Tested on Chrome and IE8. The inner iframe references a page that is on the same domain as the parent page. In this particular case, I am hiding an element with a specific class … Read more
To cover the entire viewport, you can use: <iframe src=”mypage.html” style=”position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;”> Your browser doesn’t support iframes </iframe> And be sure to set the framed page’s margins to 0, e.g., body { margin: 0; }. – Actually, this is not necessary with this solution. I … Read more
I suspect looking at the excerpt that the function trustSrc from trustSrc(currentProject.url) is not defined in the controller. You need to inject the $sce service in the controller and trustAsResourceUrl the url there. In the controller: function AppCtrl($scope, $sce) { // … $scope.setProject = function (id) { $scope.currentProject = $scope.projects[id]; $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url); } } … Read more
You may want to use the onLoad event, as in the following example: <iframe src=”http://www.google.com/” onLoad=”alert(‘Test’);”></iframe> The alert will pop-up whenever the location within the iframe changes. It works in all modern browsers, but may not work in some very older browsers like IE5 and early Opera. (Source) If the iframe is showing a page … Read more
Basically there are 4 ways to embed HTML into a web page: <iframe> An iframe’s content lives entirely in a separate context than your page. While that’s mostly a great feature and it’s the most compatible among browser versions, it creates additional challenges (shrink wrapping the size of the frame to its content is tough, … Read more
Yes, accessing parent page’s URL is not allowed if the iframe and the main page are not in the same (sub)domain. However, if you just need the URL of the main page (i.e. the browser URL), you can try this: var url = (window.location != window.parent.location) ? document.referrer : document.location.href; Note: window.parent.location is allowed; it … Read more
With different domains, it is not possible to call methods or access the iframe’s content document directly. You have to use cross-document messaging. parent -> iframe For example in the top window: myIframe.contentWindow.postMessage(‘hello’, ‘*’); and in the iframe: window.onmessage = function(e) { if (e.data == ‘hello’) { alert(‘It works!’); } }; iframe -> parent For … Read more
This works in Chrome but not Firefox 3.6 (warning: RickRoll video): <iframe width=”420″ height=”345″ src=”http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1″ frameborder=”0″ allowfullscreen></iframe> The JavaScript API for iframe embeds exists, but is still posted as an experimental feature. UPDATE: The iframe API is now fully supported and “Creating YT.Player objects – Example 2” shows how to set “autoplay” in JavaScript.
<iframe> The iframe element represents a nested browsing context. HTML 5 standard – “The <iframe> element” Primarily used to include resources from other domains or subdomains but can be used to include content from the same domain as well. The <iframe>‘s strength is that the embedded code is ‘live’ and can communicate with the parent … Read more
You can retrieve the height of the IFRAME‘s content by using: contentWindow.document.body.scrollHeight After the IFRAME is loaded, you can then change the height by doing the following: <script type=”text/javascript”> function iframeLoaded() { var iFrameID = document.getElementById(‘idIframe’); if(iFrameID) { // here you can make the height, I delete it first, then I make it again iFrameID.height … Read more