Open external webpages inside a panel using iframe
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:
Code:
{
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);
}
}
}
