an Iframe and JavaScript Objects problem

wasko · #1 05-18-2005, 05:02 AM

Hi All.

Im facing with a JavaScript problem and I just cant manage with it.

ok, what is it all about:

I want to make a simple dynamic component frequently called 'a tab panels' or 'tab buttons'
you know - you have few tab buttons on the top of the screen and each one of them replaces a
content of my document with a particular page(html page)

look for example: http://www.apycom.com/navigation-bar-tabs/ex1.html

so ok, no problem. i made it very easy and it works fine (almost - problems start later...

)

here is my directory tree:

index.html
/pages/page1.html //page to load into index.html
/pages/page2.html //page to load into index.html
/pages/page3.html //page to load into index.html

each one of the page within pages dir are the pages to be loaded after clicking one of the tab.
its simple.

ok my index.html goes like this:

//--------- index.html -----------
<html>
<head>
<script type='text/javascript' src="js/jsFile.js"></script>
</head>
<body>
<input onClick="loadIntoFrame('myFrame', 'pages/page1.html')" type='button' value='load page1.html content'>
<input onClick="loadIntoFrame('myFrame', 'pages/page2.html')" type='button' value='load page1.html content'>
<input onClick="loadIntoFrame('myFrame', 'pages/page3.html')" type='button' value='load page1.html content'>

<br><br>
Below is the Dynamic content: (in 'myDiv' element)
<br>
<hr>

<div id='myDiv'></div>
<iframe id='myFrame' name='myFrame' onLoad="loadIntoDiv('myDiv', 'myFrame')" style='display: none; visibility: hidden;' src='about:blank'>
</iframe>

</body>

<script>

/* loads a page into iframe */
function loadIntoFrame(id, page){
var el;
el = document.getElementById(id);
if(el) el.src = page;
}

/* takes a html content from iframe and pastes it into 'myDiv' on this page */
function loadIntoDiv(divName, frameName){
var el;
el = document.getElementById(divName);
aframe = window.frames[frameName];
if(el && aframe){
el.innerHTML=aframe.document.body.innerHTML;
}
}

</script>

</html>

//--------- end of index.html -----------

next, the content of pages directory:
each one of these pages contains almost similar code:

//--------- page1.html -----------
<html>
<body>

<script>
var dat = new Date();
</script>

page 1


<input type=button onClick="alert(dat)" value="test">

</body>
</html>
//--------- end of page1.html -----------

OK.
lets finally ask the question of the Day !

As you see it works great: when you click each of the button (my tab buttons are input buttons for simplicity)
the whole page is first loaded into iframe and next the content is copied with innerHTML into 'myDiv' element.

But there is a trap which I cant takeover !
When you click a 'test' button in page1.html after loading it into index.html it doesent work because the object 'dat' is created in different scope (in the iframe scope - not index.html scope).
so html content is done well but there is problem with copying javascript objects.

why im talking about it ?

its simple. the page1.html is a symbol of my Javascript components generated by jsp or php or similar engine.
i.e. I have a calendar component which is independant object and the structure of it is very similar as above:

//------------------ my component ----------------
<script>
var cal = new Calendar()
</script>
<html-code>
here i utilize a cal object by events.
for example somwhere in the code is
onClick='cal.showCurrentDate()'
</html-code>
//------------------ end of my component ------

so when this part of code is copied by the innerHTML into 'myDiv' element it looks great but when i try to click an element within html-code section
which starts an event: cal.showCurrentDate() - there is a problem. the cal object isnt known in this context !!!

Maybe my method of creating objects by <script> obj = new Object()</script><html-content>content which utilizes obj</html-content> is wrong ????

anybody has any idea how to manage with it ????
im not interested into pasting the content of page1.html into my index.html. it has to be loaded dynamicly.

hope sbd had similar problem...and has a solution.

if so THHHHHANKKK YOUUUUUUUUUU

P.S.
sorry for such a long piece of writing but i really want to know if there is another solution of my problem

greets,

Peter, POLAND

p.s.2.
sorry..my english isnt good so you have to read twice to understand what im trying to say heheh
ok joking

BigMoosie · #2 05-18-2005, 06:09 AM

There should be no reason to use applets like that source suggests.

wasko · #3 05-18-2005, 06:18 AM

im not using applets at all.
this example demonstrates the idea only .

its clean javascript in my code

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)