enyo + iframe question.

Hi,

I have a sample uses an "iframe" to show other webpage content, which will do couple of redirects based on user interaction. Eventually when all redirection done and iframe finished it round trips, i want to trap that as enyo callback function. I tried to capture iframe onload, but not working.

sample link: http://jsfiddle.net/simple2k/yAq2F/

my questions:
1) how to capture iframe completion and make it enyo event callback.
2) in App::onRefreshScreen(), when i setUrl, site like CNN shows in iframe, but Google come out empty - what is the reason, how to fix.

Thanks.

Comments

  • Some sites set a HTTP header telling the browser that it's not allowed to display in an iframe while others run JavaScript code called framebusters to prevent being framed. In general, you can't safely put up an iframe of content you don't also control.
  • Thanks Unwiredben. If iframe is not a reliable option, is there an alternate to do same. Eventually i'm trying the get the openid login process in enyo app.
  • 2) looks like google response header has "x-frame-options:Deny" and firefox(the one i'm using) honors that (https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options).

    Still, would like to know how to do (1)...
  • it all depends on if you're doing a hosted app (one served from a webserver) or a device app (one running in a PhoneGap or webOS container).

    For Phonegap, you need to use a ChildBrowser plugin. For webOS, a webview. On FireFox OS, there's a "browser" version of iframe, but it requires that your app run at elevated permissions.

    If you're doing a hosted app, usually those popup a new window and new redirections work there for OAuth.
  • Hmm...that's lot of depends, I thought there would be a enyo way of doing it, seems like not. iframe is out of option now.

    How about directly setting "document.location.href", it should work all major browsers.
    1) Does it unload all my enyo-app code?.
    2) Is there a way to know "document.location.href" finished?.

    If I can catch "document.location.href" finished, I re-render my enyo-app again - App().renderInto(document.body).

    Is that a feasible approach?
  • Yes, changing the document will unload all your code. You could probably use localStorage to save state and restore it on having your page restored, but remember that one domain can't save state for another.
  • Check the gallery for some webview approaches
  • One thing I've used for Twitter authentication (which also blocks iframe usage) is to open a popup window (though do note that modern browsers require it only open in response to something like a tap of a button) to Twitter's website. I have the authentication details sent back to my server by Twitter and when they get to my server I prompt them to close the window.

    In the app, after launching the popup window, I check every second (or 250ms, something like that) if the popup window has been closed and, if so, I proceed to the next step in finishing the authentication process.

    While I do not know if this will work with OpenID, I imagine it might be one way to go.

    I've put together a very simple example of how I achieved this: http://jsfiddle.net/LsDAy/
  • Thanks strider73, I checked the WebView, it's not working in firefox or chorme browser...have to debug and see.
  • Thanks Arthur, seems your option is the viable one I have or abandon openid plan and go for my own login code. Same trick you did will work for openid too, as it's flow is similar to oauth.


    But I have question:
    1) how do you manage to send app-data(json-data) from your server back to your enyo-app?.

    I kind of put my data in server like: window.my_data={name:' abc'}.
    And back inside enyo, App.closed() function, when I access "window.my_data" - i get permission denied to access anything in window object.

  • I originally tried the same thing as you (setting an object under window in the popup window) but if it's not the original page that's opened (and on the same domain, protocol, etc.) then it won't allow it to go through because of security protocols.

    As a result, I came up with another, less elegant, solution: on the server, I store the returned data (with OAuth, I know one part of the returned data already, the oauth_token, since that is generated in-app) and then send it a request to get the second half of the data I need.

    I would recommend you store the data similarly on your server (either in a file or in a database) and after the popup closes you call the server to get that data.
  • Thanks Arthur. Hmm...one more protocol restriction. This whole browser side world is new to me, I come from unix/c++ world. So, a lot of surprises, but interesting and learning a lot. Your solution of one more round-trip to server on close event for the server-data will work for me too.

    Now I get a picture of how to put together these pieces to solve openid login, will try and update.


  • Hi Arthur, little late, but I did this whole solution you suggested, the popup window sample code + server storing data to retrieve on window close event. It worked, except two cases:

    1) when a popup blocker kicks in, window.open() doesn't give valid object, so the PopupWindow checkIfClosed can't work correctly.
    2) as an android app: the popup auto-close using "window.close()" didn't work. so the PopupWindow launched from android app stayed open open.

    Not sure how to work around these, any suggestions.

    Thanks.
  • I'm not sure what popup blockers you're referring to, but if you're talking about a built-in popup blocker in a browser, that shouldn't be the case if you're opening the popup window in response to a user action (such as button tap).

    If it's a third-party popup blocker (a plugin), you could check to see if window.open provides a valid object and, if so, proceed to the next step, such as http://jsfiddle.net/arthurthornton/mwdP4/ shows.

    In that fiddle, I've added a value of 10 (though I don't write 10 directly, I use PopupWindow.NoWindowObject) to be returned by this.$.popup.open(), which will indicate to you if the popup window has a window object. If it returns that value, you could then tell the user "Please disable your popup blocker" and show a "Finish authenticating" button in anticipation of them doing so; I use the latter method in my app because you can't check for a closed popup window if you're running the code as an app on mobile platforms (Android, iOS, webOS, etc.) because it's not opening from inside the browser but from inside an app.

    As far as using window.open in Android apps with PhoneGap, I'd strongly advise against doing so. If you can use PhoneGap 2.3, I'd recommend using InAppBrowser; otherwise, I'd recommend you use navigator.app.loadUrl(url, {openExternal: true});. If you'd like to use InAppBrowser, one developer built a kind for that (http://enyojs.com/gallery/#jb.InAppBrowser).
  • Thanks Arthur for a quick response.
    I'm using phonegap to wrap/deploy as a phone app, but not any features from it. I plan to have single code base for web app and phone apps.

    Popup blocker is not a big stopper, as I already detecting the null window object (as you suggested in open method) and giving a user message to enable popup window to continue.

    But in the phone app mode, the inability to auto close popup window+ app not detecting the window close - was surprising to me. Now you have suggested - "show a "Finish authenticating" button" - seems like an option, but feels the full flow is not automatic. Is there a way to make it fully automatic?.

    Thanks.
  • The only way I know of to ensure it's a fairly automatic flow is to use PhoneGap's InAppBrowser. From what I recall, if you use it directly (not through that linked kind), it should allow you to just call window.open, but it will expose an actual event when the page loads and is closed (thus, you can listen for a page load event, determine it has made its way to your server, and you can pull the values directly from the URL without having to send an XHR to your server)

    You can read more about using InAppBrowser directly at http://docs.phonegap.com/en/2.3.0/cordova_inappbrowser_inappbrowser.md.html, which also provides some examples for opening a URL and listening for events.
Sign In or Register to comment.