JQuery overlay - issues with opening twitter "Allow Access" box

Question

Hey guys

I'm using Jquery flowplayer tools overlay to open external links. External links are working fine with this piece of code shown in the link:

http://www.demiseonline.com/misc/Iframeoverlay.html

Now using this overlay - I wanted to open the twitter dialog which asks users to Allow access to their account.

So in the code below, I replaced http://www.google.com with https://twitter.com/oauth/authenticate?oauth_token=VPVRIsnRz9IX4CAab7brert3jHiEs

<div class="apple_overlay black" id="Overlay1"> 
   <iframe src ="http://www.google.com" width="100%" height="595px" frameborder="0"> 
   </iframe>
</div>

When I replace the code, as soon as I load the page, even before I click on the link to open the overlay - the page gets redirected to the twitter URL.

Any idea why that happens for this URL. Thanks

Answer 1

Their page is probably checking if it's in an iframe with something like

var isInIFrame = (window.location != window.parent.location) ? true : false;

-edit

Take a deeper look into the twitter API to connect to their services (https://apiwiki.twitter.com/OAuth-Examples) - You're going to need to be a go between, authenticating the user yourself and sending/retrieving data between the user and twitter.

See also: http://github.com/jmathai/twitter-async