PDA

View Full Version : Loading external url in panel?



jacstofberg
17 Sep 2010, 9:51 PM
Hi there,

Anyone know how to load the content of an external website (e.g. http://www.google.com) in a panel or other container in sencha touch? I have looked at the panel.load function and autoload attribute for tabpanels etc., but those only seem to work for html snippets.

Any help would be much appreciated.

Cheers,
Jac

steve1964
18 Sep 2010, 12:17 AM
You can put an iframe in the html config of the panel, but this is not the right way to handle it.
If you want to point to an external url add a button to the panel:

items: [{xtype: 'button', text: 'GO', ui: 'decline', handler: function() {location.href='http://m.google.com';} }]

jacstofberg
18 Sep 2010, 6:58 AM
Steve,

Thank you for the prompt response.

The thing is that the application runs in fullscreen mode on iPhone and iPod (e.g. an icon on the homescreen and no browser navigation buttons during runtime). I use buttons to navigate to external urls at the moment, but then you get stuck on the external site as there are no back buttons etc.

I am therefore trying to get the web content to load inside a panel which has docked toolbars with my own back button, home button etc.

If iFrame's will do the trick, I'm not sure how to do it. extra help would be appreciated.

Kind regards,
Jac

evant
19 Sep 2010, 7:37 PM
Are you loading data you want to display or chunks of markup you're just dumping inside your page?

jacstofberg
19 Sep 2010, 7:57 PM
Hi evant,

After some reading, I suspect that the ManagedIFrame extension is probably what I need. I've written a Sencha Touch application for my school to access all their media content (audio broadcasts, video posts, twitter etc.) from one easy location. They've asked me to add the school's Facebook page recently, so instead of doing a custom implementation I thought I'd rather just link to the Facebook mobile url from the main menu of my app. The problem is that I want to display the Facebook link while retaining my application toolbars so that users can return to the main menu etc.

It works well if you access the application in a mobile browser, but when I use the fullscreen metatag on apple devices, the browser back button is not visible and users are unable to return to the main menu of my application after visiting an external site.

I have found no easy way to embed an external page (e.g. www.google.com or our Facebook page) in a panel and retain my toolbars. I've played around with the ManagedIFrame demos that Doug Hendricks posted, but could not get any of them to work.

Can't be that difficult to load a page inside a panel right?! :)

Cheers,
Jac

jacstofberg
19 Sep 2010, 8:04 PM
And sorry about getting your name wrong...I see it's Evan:)

evant
19 Sep 2010, 9:37 PM
It's not:



html: '<iframe src="http://google.com"></iframe>;

jacstofberg
19 Sep 2010, 9:59 PM
Evan,

I've set the inner html for a panel to "<iframe src="http://m.google.com" width="100%" height="100%"> </iframe>". This displayed the website content in my browser on the pc, but did not allow any interaction with the site (scrolling etc.) It also makes the web app hang/freeze on my iPod touch. Seems that it somehow interferes with the rest of the code.

I'm probably missing something really silly (that's how it always is right?!). It seems that a lot of people have trouble getting this right and have therefore turned to Doug's libraries (Even that proved pointless in my case:)).

Thanks for your help. Please let me know if you think of anything else.

Cheers,
Jac

jacstofberg
19 Sep 2010, 10:16 PM
Evan,

Sorry to have wasted your time. I found some silly mistakes in my code.

Really appreciate your help though. I'll be careful to look at my code properly before I ask questions again.

All the best,
Jac

ps: I do have some problems with Ext.Msg.alert('',''). The screen gray's out a little (a sign that the modal part of the messagebox is working fine), but no messagebox or text appears. If there are some well-known mistakes people make or known bugs, please point me in the right direction.

yuryb
21 Sep 2010, 8:51 AM
how did you resolve the issue, if you don't mind me asking?

i have the exact same problem with iframe in my ipad app.
i can open iframe using "<iframe...>" tag and make it the right height inside a card in tabpanel, so i still have my top and bottom toolbars, but, just as you said, i'm loosing all the touch interaction with the iframe...

so, how did you resolve the issue?

thank you in advance,
yury


Evan,

Sorry to have wasted your time. I found some silly mistakes in my code.

Really appreciate your help though. I'll be careful to look at my code properly before I ask questions again.

All the best,
Jac

ps: I do have some problems with Ext.Msg.alert('',''). The screen gray's out a little (a sign that the modal part of the messagebox is working fine), but no messagebox or text appears. If there are some well-known mistakes people make or known bugs, please point me in the right direction.

jacstofberg
22 Sep 2010, 8:08 AM
Yury,

Sorry about the late reply. I've been trying to reproduce my mistake because I could not remember what exactly I did wrong.

Unfortunately I could not get it to stop working again. As I remember I just had some really general mistakes in my panel code. Stuff that would basically break any code I put in there.

If you set the inner html property (html: '<iframe>...') of the panel, the site should load with interaction and all.

Sorry I couldn't help. I'll let you know for sure if something pops into my mind.

Kind regards,
Jac

yuryb
22 Sep 2010, 9:48 AM
jac,
thank you for the reply.
i can not get it to work, though i have a very basic panel as one of the panels inside a tabpanel...
html: '<iframe ...>' brings iframe's content, but no touch interaction works on ipad/iphone, i.e. it is impossible to scroll the content of the iframe if it is bigger than panel's height.
would you show me a snippet of your code for this specific panel? maybe i'm just missing some options which make it work.
thank you...

jacstofberg
15 Oct 2010, 7:10 AM
Hi all,

I apologize for the confusion. Initially I could not get any interaction with iFrames (e.g. when I loaded http://google.com I could not even enter something in search box). When I then finally got some interaction, I immediately declared my issue SOLVED.

However, I found very quickly that I could not scroll the iFrame content at all. I could therefore only show part of the content. What's more, if I load "http://www.google.com" instead of just "http://google.com", the application would crash and exit.

So, in conclusion: This problem is still OPEN. I have abandoned iFrames since last time I tried, but it would solve many problems for me if I could get it going with scrolling capability.

Kind regards,
Jac

touchy
21 Oct 2010, 9:11 PM
Same problem. In <iframe…> in Safari on iPad no scrolling. Supposed two-finger scroll doesn't work either with <iframe…>, only works with <div…>. Tried many combinations of overflow, position, scrolling, width, height, etc.. About ready to load into hidden <iframe…> and copy into visible <div…>, which is work and not right, e.g. styles issue.

lteti77
26 Oct 2010, 10:31 AM
i've the same problem. a panel with a iframe inside a tabpanel. i can load the iframe but when i try to scroll the scollbar applies also to the tabpanel. so i scoll everything...

touchy
26 Oct 2010, 10:37 AM
Problem appears to be caused by mobile (not desktop) Safari issue with <iframe>. Sencha Touch isn't the root cause, and apparently they haven't found and can't make a workaround either. By now I live with it by loading into hidden <iframe> and copying over into <div>. It isn't ideal, think of everything you lose by not having <iframe>, issues with isolation, styles, etc.

lteti77
26 Oct 2010, 10:44 AM
in fact in safari desktop everything works but in mobile doesn't... btw can you post some code describing how to perform this copy? it would be useful...
thanks

loziobiz
29 Oct 2010, 1:17 AM
same problem here in italy./:)

steve1964
30 Oct 2010, 4:34 AM
Hi all, i've found this for the iframe on Mobile Safari:
http://support.apple.com/kb/HT1484
the only way to scroll an iframe is by using two fingers simultaneously, if you use one finger you scroll the entire component, i suppose.
What i dont know is how this one is handled within Sencha Touch, Anyone of Sencha Touch Team can clarify this?
Thanks

jacstofberg
30 Oct 2010, 9:25 AM
Steve,

Touchy also mentioned the two finger scroll above, but it does not seem to work either:(

It would really really really be neat to be able to accomplish this basic thing. When you run an app in fullscreen mode, it would be great to be able to redirect to external links while keeping your own toolbar buttons and not exit the app completely.

Especially since Apple decided to reload the web app from scratch every time you access it in fullscreen mode. Exiting the app to visit a link and having to reload the whole app again so that you can get back to where you were is rather frustrating to users. And many have told us that.

Feedback always: "So how do I get back?". And I have to answer: "Sorry, guess you'll have to buy a Droid phone with a hardware back button:)"

Cheers,
Jac

steve1964
1 Nov 2010, 3:09 AM
Hi Jac, i think the only way to do that is a sort of new component, a web container component that act like an in webapp browser.

The fact that the 2 fingers method is not working is simply because this event is not handled by Sencha Touch components, so when you scroll with one finger you are scrolling the component and not the iframe.

dloomer
1 Nov 2010, 5:07 AM
Just adding my +1. Don't know how possible it is, but it really would be helpful to my app to be able to do this, rather than have to launch a new window (or display it inline without any sort of navigation that brings the user back to my app).

SimonTemple
16 Dec 2010, 1:24 AM
Another +1 for me.

This issue looks like it's related to this open issue: http://www.sencha.com/forum/showthread.php?112003-OPEN-418-Content-in-IFrame-in-Panel-Will-Not-Scroll&highlight=418

frrogoy
17 Dec 2010, 7:51 AM
I am working on a simple app that has a form that requests login info: ID and password. In response I want a php module to display a nested list of info (new leads) for that user, (or invalid login). I'm fuzzy on how pass data back from the php module and replace the login form with the list. Should the response module just build it's own panel as though it were the first module being invoked?
I rewrote this to have the form do an ajax call instead of doing a submit., passing the info as parms. Then I hid the form panel and displayed my list panel. The only way I got this to work was to define both panels with fullscreen: true on both. Then hide the list panel. After the data is returned I switched which panel was being displayed.
I've been using ExtJS for several years. Seems like lots of trial and error now to get Touch to work... Having never worked with phone apps before, I need a tutorial on the architecture and rules, I think.

wordwarrior
22 Apr 2011, 12:19 AM
Issue: Rendering html inside a tabl panel...
Solution:
I am using PhoneGap but I did not try with the iframe solution instead I tried with html:'<div></div>'; and then in the listerner: activate: function(){ //called my JS to show the page} Now although i got the page to render but some pages were just not scrollable or they had issues like http://m.yahoo.com if u load this then u it breaks at the icons on that page.
On going through the kitchen sink again and again i found out that in the Data segment Getting data via Ajax he is actually rendering the html from the web onto a 'PANEL' ..I was finding it immensely difficult to know what he is using (in the kitch sink example of tabpanel) in items.. the code is good but little descriptive help is more appreciated especially when u give the power to add any crap in items.
so now what i do is i render a tab panel and in that items i put xtype:'panel'; and render the html and to my surprise it does everything beautifully. without any issues..
Incase u guys are still struggling post me a message i will show u my rnd code..
I dont know if this is the real solution but by far its the best working thing i got in this respect.

EdmundasAdv
25 Apr 2011, 11:34 PM
@wordwarrior:
Yes, this issue is still the case for some of us.
So I will appreciate it if you could share your solution.

pensive612
26 Apr 2011, 4:37 PM
Yes please post! Thanks in advance...

wordwarrior
12 May 2011, 9:10 PM
@All
I am really sorry I did not find time earlier to get back to you'll.
Here is my sample code Please get back to me incase any issues
incase i dont reply here for long then its probably because I have been working on something else which is consuming all my time.. in such a scenario u can shout back at me at nimishnayk@gmail.com.

Rgds

antonccc
19 May 2011, 9:00 AM
@wordwarrior

Thanks for the code, but when I'm trying to test it I get this from Safari:

file://(null)
0

wordwarrior
21 May 2011, 6:00 AM
Ok I dont know how you using the files.. But I basically run it from a web server (Apache) so you have place the folder in /var/www if you are on Linux.
Let me know if that helped

antonccc
29 May 2011, 12:56 PM
Thanks wordwarrior for your response.

I tried iscroll, which kinda worked. I'm trying to load some liferay portlets ans since I dont have any control of their sourcecode the app is showing the typical iphone problems with iframes.

wordwarrior
30 May 2011, 8:57 AM
@antonccc

Iframes on Iphone are absolute no-no. Its also not recommended.

siebmanb
28 Oct 2011, 5:30 AM
@wordwarrior in your code you say :

Note:- If you are using PhoneGap then you can even do cross domain AJAX

But how can I do that ? Because it currently doesn't work without any modification of your code :p (Security error is thrown)

Thank you !

deeno1975
1 May 2012, 6:48 AM
Hi

Sorry for dragging this up again but I'm still looking for a resolution. The sample code that you gave works great but only for static html documents. When I change the reference to an external URL it does not work. Is there something missing that I must do???

Thanks

Sasha172
10 Aug 2012, 3:49 AM
If you're using Phonegap/Cordova, and you need a fully interactive site to show in your app, then I suggest using the ChildBrowser Plugin.

If not, and its a simple scrolling site, then using Ext.Ajax is the only way you'll get scroll to work