EzDevInfo.com

Pass message from a page to parent frame using Javascript and without HTML 5

I have the following scenario where I have a page say “parentPage.html”, which contains an iFrame say “parentFrame” which hosts the page “childFrame.html”. “childFrame.html” contains another frame called “childFrame” and calls the page “sample.html”. Now, I want to send a message from “sample.html” and receive it at “parentPage.html” or “childFrame.html”.

I've tried using the Porthole library. However, it doesn't help me in solving this particular scenario. Also, please note that the above mentioned pages need no be in the same domain.

It would be great if you could let me know on how I can solve this particular problem.

Thanks in advance.

Cross Domain Pop Ups

My flow is as follows: the user clicks sign in on site 1. a pop up is opened from site 2 asking him to login using twitter. he then logs in - using oAuth, so the page changes. After a successful login the pop up should close and the code on site 1 should receive a notification.

What didn't work:

• WebIntents - well, the examples on their site didn't even work, so I didn't try it locally..
• easyXDM - communicates with an iframe, not a popup.
• porthole - same, uses an iframe.

A horrible solution is refreshing the iframe every couple of seconds, to check if the user logged in already.

Is there a better way to do this? better libraries?

Is it viable to make cross-domain ajax requests within iframed content?

I have an application on one domain which needs to get data from an application on another domain.

I would like to use an iframe based cross domain ajax tool such as porthole.js to implement the following:

1. My application loads a page on the other server in an iframe.

2. A message is sent using porthole to the iframe.

3. The page on the other server checks to make sure the calling url is valid, and reads in the url of the ajax request it will make from the message.

4. The remote page then uses the passed url to make an ajax request.

5. The results are passed back to my application.

This solution lets me use the remote json data without systematically altering all of the services, which are built and managed by another team. If it doesn't work, I would work with them to use a system that uses porthole.js or jsonp for cross domain scripting.

The point that concerns me, though, is step 4. Does this count as an ajax call from the remote document inside the iframe, which would be able to make ajax calls against it, or does it count as a call from the outer window, which can't use ajax to call that domain?

What's the proper way to implement Porthole.js for resizing an iframe based on content height?

I am trying to use Porthole.js (http://ternarylabs.github.io/porthole/) to pass the height of an iframe's content to its parent (so the parent can resize the iframe to "fit" the contents)... but I can't get it to work.

The parent (on abc.com):

<script src="porthole.min.js"></script>
<script type="text/javascript">
            var guestDomain = 'xyz.com';
            function onMessage(messageEvent) {  
                if (messageEvent.origin == "http://" + guestDomain) {
                    if (messageEvent.data['newHeight']) {
                        el = document.getElementById('iframe-name-here');
                        newHeightvar = (messageEvent.data['newHeight'],60);
                        window.alert("PARENT RECEIVED VALUE (+60): "+newHeightvar);
                        el.setAttribute('height', newHeightvar);
                    };
                };
            };
            var windowProxy;
            // register proxy window url and iframe name
            var proxy = new Porthole.WindowProxy("http://xyz.com/proxy.html", "iframe-name-here");
            // register an event handler to receive messages
            proxy.addEventListener(onMessage);
</script>

The iframe (on xyz.com):

<script src="js/porthole.min.js"></script>
<script type="text/javascript">
    $(document).ready(function($) {
    var proxy = new Porthole.WindowProxy("http://abc.com/proxy.html");
    var heightVal = $(document).height();
    window.alert("CHILD SENT VALUE: "+heightVal);
    proxy.post({"newHeight" : heightVal});
    });
</script>

I am unsure how to test better to see if the data is being pushed from iframe to parent. The alerts fire but the parent alert isn't giving me the value of the passed data.

Basically, I want to receive the iframe's content size (messageEvent.data['newHeight']), add 60px to it, and set the iframe's height accordingly. Where am I going wrong? D: