PDA

View Full Version : Open external webpages inside a panel using iframe



La Muerte Peluda
15 Nov 2012, 9:55 AM
Hi, I've found this solution (putting together many different advices on that I've found around the web) to open an external webpage in a panel, e.g. by pushing a new panel with the external page.

The default behavior for mobile browser is to open the link in a new tab, which is quite annoying if you are in a full screen web app!

This solution does not require any ajax trick, as it exploits an iframe and intercepts the default event for all <a> tags in a component (use with caution). Works well on iOS as well on Android. :D

I post here the config for a container that pushes to a navigation view a new container wrapping a panel containing an iframe that shows the external webpage. The navview has id 'thenavview' and i mask it in order to avoid the double tap/double push annoying bug (@sencha guys: when will you solve it?).

Here is the code, hope someone finds it useful:


{
xtype:'container',
title: 'MY TITLE',
items: [<MY COMPONENTS>],
scrollable:{
direction: 'vertical',
directionLock: true
},
listeners:{ //intercept clink on link to open it in an iframe
painted:function(mycomponent){
var externalPages=mycomponent.element.dom.getElementsByTagName('a');
for (var i=0;i<externalPages.length;i++)
{
externalPages[i].onclick =
(function(theHref){
return function() {
var navView=Ext.getCmp('thenavview');
navView.setMasked({
xtype:'loadmask',
message:'Loading external link...'
});
navView.push({
xtype:'container',
scrollable:true,
items:[
{
xtype:'panel',
html: '<div style="overflow:scroll;-webkit-overflow-scrolling:touch;"><iframe style="width:100%;height:100%;" src="'+theHref+'" onload="(function(){Ext.getCmp(\'thenavview\').setMasked(false);})()">Your device does not support iframes.</iframe></div>'
}
]
});
return false;
};
})(externalPages[i].href);
}
}
}

mitchellsimoens
19 Nov 2012, 6:41 AM
It is important to know that some interactions are not going to work within an iframe, like scrolling.

La Muerte Peluda
19 Nov 2012, 6:57 AM
Actually this line allows you to scroll the webpage inside iframe:


style="overflow:scroll;-webkit-overflow-scrolling:touch;

(tested on iPad 2/3, iOS 6, Sencha Touch 2.0.1)

mitchellsimoens
19 Nov 2012, 7:01 AM
Just tried this on my iPhone 5, iPad 3 with iOS 6.0.1 using ST 2.0.3 and 2.1.0 and it will scroll horizontally but not vertically:


Ext.Viewport.add({
html : '<div style="overflow:scroll;-webkit-overflow-scrolling:touch;"><iframe style="width:100%;height:100%;" src="http://www.sencha.com/"></iframe></div>'
});

La Muerte Peluda
19 Nov 2012, 7:19 AM
Yes, you're right! If I scroll vertically then the whole page seem to scroll (including the other widgets...). I didn't notice that because the page I opened was quite small!! :((

I'll investigate and try to improve the code to overcome this. :-?

damandeep.singh
21 Aug 2013, 3:08 AM
For scrolling to work :

Use below snippet to achieve this on iOS devices



<div style="-webkit-overflow-scrolling: touch;overflow-x:hidden;overflow-y: scroll;height:500px;"><iframe src="'+d+'" width="100%" height="100%"></div>


and for Android:


<div style="height:auto;"><iframe src="'+urlMain+'" width="100%" height="100%" scrolling="yes"></iframe></div>