sencha touch :: how to create a panel for website-preview inside iFrame
I need to allow some website previews inside sencha touch. I see two different possibilities:
- opening safariMobile-app to show the link
- generating a panel with an iFrame inside the 'html'-property.
because I don't know how to achieve 1. I started with 2. but run into some trouble:
a) the content of my iFrameis not scrollable. if I try to scroll the content, the whole viewport scrolls, including my bottom-tabPanel-Buttons!
b) the displayed website seems to load without any css or images
here is my previewPanel-code:
app.views.WebsitePreview = Ext.extend(Ext.Panel, {
layout: 'card',
scroll: 'vertical',
styleHtmlContent: true,
fullscreen: true,
initComponent: function(){
this.html = '<iframe width="100%" height="100%" src="'+ this.theLink + '"></iframe>',
var toolbarBase = {
xtype: 'toolbar',
title: 'Vorschau ' //+ this.childData.childUsername,
};
if (this.prevCard !== undefined) {
toolbarBase.items = [
{
开发者_如何学C xtype: 'button',
ui: 'back',
text: 'zurück', //this.prevCard.title,
scope: this,
handler: function(){
this.baseScope.setActiveItem(this.prevCard, { type: 'slide', reverse: true });
}
}
]
};
this.dockedItems = toolbarBase;
app.views.WebsitePreview.superclass.initComponent.call(this);
}
});
Ext.reg('websitepreview', app.views.WebsitePreview);
thnx for your help!
I spent two days fighting with the same problem. It seems that finally I found a solution.
The first thing you should try is to use new built-in feature introduced in iOS 5.
-webkit-overflow-scrolling:touch;
You need to wrap your iframe with div, something like:
...
this.html = '<div style="-webkit-overflow-scrolling:touch; height: 500px; overflow: auto;"><iframe .../></div>'
...
If it doesn't work (in my case it worked only first time) then you can try to handle touch events by yourself. Let's say you have the following structure in html:
<div id="wrapper">
<iframe id="my-iframe" .../>
</div>
to make iframe scrollable you need to add this JS
var startY = 0;
var startX = 0;
var ifrDocument = document.getElementById("my-iframe").contentWindow.document;
ifrDocument.addEventListener('touchstart', function (event) {
window.scrollTo(0, 1);
startY = event.targetTouches[0].pageY;
startX = event.targetTouches[0].pageX;
});
ifrDocument.addEventListener('touchmove', function (event) {
event.preventDefault();
var posy = event.targetTouches[0].pageY;
var h = document.getElementById("wrapper");
var sty = h.scrollTop;
var posx = event.targetTouches[0].pageX;
var stx = h.scrollLeft;
h.scrollTop = sty - (posy - startY);
h.scrollLeft = stx - (posx - startX);
startY = posy;
startX = posx;
});
Source of the second solution is here
The only way I got this to work was by nesting the <iframe>
in 2 panels, but this will probably only work if you know the dimensions of the document in the <iframe>
, I also placed a transparent <div>
over the <iframe>
so the touch events still trigger the "scroll events"
root = new Ext.Panel({
fullscreen: true,
layout: 'card',
version: '1.1.1',
scroll: false,
dockedItems: [{ xtype: 'toolbar', title: 'hello'}],
items: [{
xtype: 'panel',
scroll: 'both',
items: [{
id: 'iframe',
layout: 'vbox',
width: '1200px',
height: '1000px',
html: ['<div style="width:1200px;height:1000px;position:fixed;top:0;left:0;background-color:Transparent;float:left;z-index:99;"></div>',
'<iframe style="position:fixed;top:0;left:0;float:left;z-index:1;" width="1200px" height="1000px" src="http://google.com/"></iframe>']
}]
}]
});
So using your code:
this.items = [{
id: 'iframe',
layout: 'vbox',
width: '1200px',
height: '1000px',
html: ['<div style="width:1200px;height:1000px;position:fixed;top:0;left:0;background-color:Transparent;float:left;z-index:99;"></div>',
'<iframe style="position:fixed;top:0;left:0;float:left;z-index:1;" width="1200px" height="1000px" src="' this.theLink + '"></iframe>']
}]
精彩评论