Problem handling IFrame in Panel

[bovello]

Hi there,
I'm having some problems developing my idea...
Let me explain my goal: I want to realize a page that allows user to scroll (slide effect) between contents, where every page is an Iframe. I don't want to define all Iframes at the beginning, because thay can be a lot and they would be loaded all since user opens main page.
Instead I think to populate them only when necessary. (e.g. if I'm seeing page 1 i load page 2 to be ready to slide to it, then i load page 3 and so on). Every Iframe has a button "next" that starts animation.
Currentyl I have a main page (mainpage.html) where in its js file I use a fullscreen panel with a slide animation


var slidePanel = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardSwitchAnimation : {
type: 'slide',
duration: 1000
},
items: arrayIFrame,
...

where items (arrayIFrame) is an array that contains IFrame elements that I populate dinamically


var arrayIFrame = [{id: 'slide1',html:'<iframe id="iframe1" src="./paginauno.html" width="100%" height="100%" </iframe>'}];
arrayIFrame[1] = {id: 'slide2',html:'<iframe id="iframe2" src="./paginadue.html" width="100%" height="100%"></iframe>'};
...

Up to here it seems to work.

Then I want that user's click on iframe button "next" of first page "./paginauno.html" calls a function in the main page in order to start animation versus "./paginadue.html":


slidePanel.cardSwitchAnimation.direction='left';
slidePanel.setActiveItem(1);

and adds to arrayIFrame next iframe to be loaded (to be ready for user's next click):


arrayIFrame[3] = {id: 'slide3',html:'<iframe id="iframe3" src="./paginadue.html" width="100%" height="100%"></iframe>'};

I try tu access to parent page elements using parent.document.mainpagefunction() but i receive the following error:


Unsafe JavaScript attempt to access frame with URL
file:///C:/Users/marco/Desktop/Sencha/mainpage.html from frame with URL
file:///C:/Users/marco/Desktop/Sencha/paginauno.html. Domains, protocols and ports must match.

Uncaught TypeError: Cannot call method 'mainpagefunction' of undefined

Error refers to cross-scriptin violation, because browser reads source file directly from disk path and not through web server and javascript can't understand domain. But this is my need, because theese files will be loaded in a WebView of Android/Iphone app.

Do you have any workaround for this problem?
Anyone has another idea to realize my job without using communication between parent page and iframes?

Another solution I was thinking about is to read html from single pages (e.g. paginauno.html) and put it as content of slidepanel items, but I don't know how do it. I can't do httprequest, always because I have no web server.

I f anyone can help me would be great.
Ask if something is not clear.
Thanks for your time,

Marco

[jay@moduscreate.com]

Iframes, no way.

That said, why are you developing with file:// instead of using a dev web server?!

[bovello]

Thanks for your answer.
I'm not using web server because I have to put theese files (main page and sub-pages) embedded inside Android and Iphone app and then I open them in a native application with Android/IOS webView.

I didn't fall in love with IFrame :D... if I can be honest I don't like IFrame so much. But actually I didn't find any other objects for my scope.

Any other ideas are welcome =D>=D>=D>

I'd like that user would be able to navigate through pages with slide animation and without loading all pages expected in navigation if they are not necessary

E.g. Navigation path: page1->page2->page3->page4->......->page100 I don't want to load all 100 pages in one shot. But at the beginning only page1 and page2, then when user will go in page2 I want to load page3, than page 4 and so on.

Thanks a lot,

Marco