EzDevInfo.com

Calling a parent window function from an iframe

I want to call a parent window JavaScript function from an iframe.

<script>
    function abc()
    {
        alert("sss");
    }
</script>

<iframe id="myFrame">
    <a onclick="abc();" rel='nofollow' href="#">Call Me</a>
</iframe>

Resizing an iframe based on content

I am working on an iGoogle-like application. Content from other applications (on other domains) is shown using iframes.

How do I resize the iframes to fit the height of the iframes' content?

I've tried to decipher the javascript Google uses but it's obfuscated, and searching the web has been fruitless so far.

Update: Please note that content is loaded from other domains, so the same-origin policy applies.

Using CSS to affect div style inside iframe

Is it possible to change styles of a div that resides inside an iframe on the page using CSS only?

How to apply CSS to iframe?

I have a simple page that has some iframe sections (to display RSS links). How can I apply the same CSS format from the main page to the page displayed in the iframe?

jQuery/JavaScript: accessing contents of an iframe

I would like to manipulate the html inside an iframe using jquery.

I thought I'd be able to do this by setting the context of the jQuery function to be the document of the iframe, something like:

$(function(){//document ready
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
});

However this doesn't seem to work. A bit of inspection shows me that the variables in frames['nameOfMyIframe'] are undefined unless I wait a while for the iframe to load. However, when the iframe loads the variables are not accessible (I get permission denied type errors).

Does anyone know of way to work around this?

Remove border from IFrame

How do I remove the border from an iframe embedded in my web app? An example of the iframe is:

<IFRAME src="myURL" width="300" height="300">Browser not compatible. </IFRAME>

I would like the transition from the content on my page to the contents of the iframe to be seamless, assuming the background colors are consistent. The target browser is IE6 only and unfortunately solutions for others will not help.

Make iframe automatically adjust height according to the contents without using scrollbar?

For example:

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>

I want it to be able to adjust its height according to the contents inside it, without using scroll.

Adjust width height of iframe to fit with content in it

I need solution for auto adjusting the width and height of an iframe to fit with the content in it, and the point is the content size (width, height) could be changed after iframe has been loaded. I guess I need an event action when body size changed.

Youtube iframe wmode issue

Using javascript with jQuery, I am adding an iframe with a youtube url to display a video on a website however the embed code that gets loaded in the iframe from youtube doesnt have wmode="Opaque", therefore the modal boxes on the page are shown beneath the youtube video.

Any ideas how to solve the issue?

Javascript callback when IFRAME is finished loading?

I need to execute a callback when an IFRAME has finished loading. I have no control over the content in the IFRAME, so I can't fire the callback from there.

This IFRAME is programmaticly created, and I need to pass its data as a variable in the callback, as well as destroy the iframe.

Any ideas?

EDIT:

Here is what I have now:

function xssRequest(url, callback)
{
    var iFrameObj = document.createElement('IFRAME');
    iFrameObj.src = url;			
    document.body.appendChild(iFrameObj);	

    $(iFrameObj).load(function() 
    {
    	document.body.removeChild(iFrameObj);
    	callback(iFrameObj.innerHTML);
    });
}

This callsback before the iFrame has loaded, so the callback has no data returned.

YouTube Video Embedded via iframe Ignoring z-index?

I'm trying to implement a horizontal multilevel dropdown navigation menu. Immediately below (vertically) the menu, I've got a YouTube video embedded via iframe. If I hover over one of the main level nav items in Firefox, the dropdown menu properly appears on top of the video.

In Chrome and IE9, however, only a sliver of the dropdown is visible in the small region of space I have between the menu and the iframe. The rest of it seems to be behind the iframe.

The problem seems to be related to the YouTube video, not the iframe. To test, I aimed the iframe at another web site rather than the video, and the dropdown menu worked fine, even in IE.

• Question 1: WTF?
• Question 2: Why, even if I explicity put a z-index:-999 !important; on the iframe does this problem still occur?

Is there some internal CSS that the YouTube embed code includes that is somehow overriding things?

What's the best way to reload / refresh an iframe using JavaScript?

I would like to reload an iframe using JavaScript. The best way I found until now was set the iframe src attribute to itself, but this isn't very clean. Any ideas?

YouTube Iframe embed auto play

I am trying to embed the new iframe version of a YouTube video and get it to auto play.

As far as I can tell, there is no way of doing this by amending flags to the URL. Is there a way to do it by using javascript & the API?

How to set an iframe src attribute from a variable in AngularJS

I'm trying to set the src attribute of an iframe from a variable and I can't get it to work...

The markup:

<div class="col-xs-12" ng-controller="AppCtrl">

    <ul class="">
        <li ng-repeat="project in projects">
            <a ng-click="setProject(project.id)" rel='nofollow' href="">{{project.url}}</a>
        </li>
    </ul>

    <iframe  ng-src="{{trustSrc(currentProject.url)}}">
        Something wrong...
    </iframe>
</div>

controllers/app.js:

function AppCtrl ($scope) {

    $scope.projects = {

        1 : {
            "id" : 1,
            "name" : "Mela Sarkar",
            "url" : "http://blabla.com",
            "description" : "A professional portfolio site for McGill University professor Mela Sarkar."
        },

        2 : {
            "id" : 2,
            "name" : "Good Watching",
            "url" : "http://goodwatching.com",
            "description" : "Weekend experiment to help my mom decide what to watch."    
        }
    };

    $scope.setProject = function (id) {
        $scope.currentProject = $scope.projects[id];
        console.log( $scope.currentProject );

    }
}

With this code, nothing gets inserted into the iframe's src attribute. It's just blank.

Update 1: I injected the $sce dependancy into the AppCtrl and $sce.trustUrl() now works without throwing errors. However it returns TrustedValueHolderType which I'm not sure how to use to insert an actual URL. The same type is returned whether I use $sce.trustUrl() inside the interpolation braces in the attribute src="{{trustUrl(currentProjectUrl))}}" or if I do it inside the controller when setting the value of currentProjectUrl. I even tried it with both.

Update 2: I figured out how to return the url from the trustedUrlHolder using .toString() but when I do that, it throws the security warning when I try to pass it into the src attribute.

Update 3: It works if I use trustAsResourceUrl() in the controller and pass that to a variable used inside the ng-src attribute:

$scope.setProject = function (id) {
    $scope.currentProject = $scope.projects[id];
    $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
    console.log( $scope.currentProject );
    console.log( $scope.currentProjectUrl );

}

My problem seems to be solved by this, although I'm not quite sure why.

Safari 3rd party cookie iframe trick no longer working?

So this is the umteenth revenge of the "how do I get 3rd party cookies to work in Safari" question but I'm asking again because I think the playing field has changed, perhaps after February 2012. One of the standard tricks to get 3rd party cookies in Safari was as follows: use some javascript to POST to a hidden iframe. It (used to) trick Safari into thinking that the user had interacted with the 3rd party content and so then allow cookies to be set.

I think this loophole has been closed in the wake of the mild scandal where it was revealed that Google was using that trick with its ads. At the very least, while using this trick I have been completely unable to set cookies in Safari. I unearthed some random internet postings that claimed that Apple was working on closing the loophole but I haven't found any official word.

As a fallback I even tried redesigning the main third party frame so that you had to click on a button before the content would load but even that level of direct interaction was not enough to melt Safari's cold cold heart.

So does anyone know for certain if Safari has indeed closed this loophole? If so, are there other workarounds (other than manually including a session ID in every request)?