iframes in iframes

[John Robin Dove]

Hi Clifton,
I hope you are well. If you have time, and I'm guessing you do at the moment, could you have a look at this, please? I think it would be better if all my program was contained in one window. This would prevent the user from navigating back and forth randomly and would ensure that only my interfaces are used to navigate from one page of the program to another. i have quite a long way to go before I can start implementing this plan but I like to think ahead. iframes in iframes makes communication between pages more complicated. I would be grateful if you could look at the system I have come up with. Maybe there are better ways of doing this. The get property system seems a bit dodgy to me. I have made three test apps: test1 is in test2 and test2 is in test3. I have put them here https://www.mediacours.com/tb_examples/test3/index.html, I have put a zip here https://www.mediacours.com/tb_examples/test3.zip and here is the text of the 3 XML files:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<page>
 
  <config>
    <!--TEST 1-->
  </config>
 
  <testSub>
    <pgStyleObject>
    <![CDATA[
    { theStyle : "cursor",
    propVal  : "pointer"}
    ]]>
    </pgStyleObject>
 
    <function name="myClick" event="click" params="" useTB="true">
    <![CDATA[
    tbfunction_pgExecuteRemote("main", "tbfunction_pgTBObjSet", ["relay", "user", ["holdDoc3", "response2", "text", ":-)"]]);
    ]]>
    </function> 
  </testSub>
 
  <testMain>
    <pgStyleObject>
    <![CDATA[
    { theStyle : "cursor",
    propVal  : "pointer"}
    ]]>
    </pgStyleObject>

    <function name="myClick" event="click" params="" useTB="true">
    <![CDATA[
    tbfunction_pgExecuteRemote("main", "tbfunction_pgTBObjSet", ["response3", "text", ":-)"]);
    ]]>
    </function> 
  </testMain>
 
   <getProp>
    <pgStyleObject>
    <![CDATA[
    { theStyle : "cursor",
    propVal  : "pointer"}
    ]]>
    </pgStyleObject>

    <function name="myClick" event="click" params="" useTB="true">
    <![CDATA[
    tbfunction_pgExecuteRemote("main", "tbfunction_pgTBObjSet", ["returnProp", "user",["holdDoc3", "myObj", "text"]]);
    var result = tbfunction_pgExecuteRemote("main", "tbfunction_pgTBObjGet", ["response3", "text"]);
    alert(result);
    ]]>
    </function> 
  </getProp>
</page>

<?xml version="1.0" encoding="UTF-8"?>
<page>
 
  <config>
    <!--TEST 2-->
  </config>
 
  <holdDoc2>
    <function name="myLoad" event="load" params="e">
    <![CDATA[
    tbfunction_pgGotoURL("holdDoc2", "../../test1/")
    ]]>
    </function>
  </holdDoc2>
 
  <test>
    <pgStyleObject>
    <![CDATA[
    { theStyle : "cursor",
    propVal  : "pointer"}
    ]]>
    </pgStyleObject>

    <function name="myClick" event="click" params="" useTB="true">
    <![CDATA[
    tbfunction_pgExecuteRemote("holdDoc2", "tbfunction_pgTBObjSet", ["response1", "text", ":-)"]);
    ]]>
    </function> 
  </test>
</page>

<?xml version="1.0" encoding="UTF-8"?>
<page>
  <config>
    <!--TEST 3-->
  </config>
 
  <holdDoc3>
    <function name="myLoad" event="load" params="e">
    <![CDATA[
    tbfunction_pgGotoURL("holdDoc3", "../../test2/");
    ]]>
    </function>
  </holdDoc3>
 
   <make id="relay" type="div" level="0" dims="-50,-50,20,20" class="" refObj="sysbootstrap" autoAlign="" replace="">
      <function name="myUser" event="user" params="e">
      <![CDATA[
      //target = e.data[0];!!
      //object = e.data[1];!!
      //property = e.data[2]!!
      //value = e.data[3]!!
     
      tbfunction_pgExecuteRemote(e.data[0], "tbfunction_pgTBObjSet", [e.data[1], e.data[2], e.data[3]]);
      ]]>
      </function>
   </make>
   
   <make id="returnProp" type="div" level="0" dims="-50,-50,20,20" class="" refObj="sysbootstrap" autoAlign="" replace="">
      <function name="myUser" event="user" params="e">
      <![CDATA[
      //target = e.data[0];!!
      //object = e.data[1];!!
      //property = e.data[2]!!
   
      //alert(e.data[0] + "\n" + e.data[1] + "\n" + e.data[2]);!!
     
      var myProp = tbfunction_pgExecuteRemote(e.data[0], "tbfunction_pgTBObjGet", [e.data[1], e.data[2]]);
      //alert(myProp);!!
      //return myProp; Not possible?!!
      tbfunction_pgTBObjSet("response3", "text", myProp);
      ]]>
      </function>
   </make>
</page>

Thanks for your time.
John

[Clifton]

You could use session variables to pass information between windows. They can be encrypted and immediately deleted. This is probably a better approach than using fields to hold possibly sensitive data.

Nevertheless, I played around with your system a little and modified it to load in a more predictable way by using the built in callbacks from the XML system. I also used the CSS3 animation abilities of the PowerPac to make the whole loading process look nice and smooth.

Regarding passing data.

If you continue to pass data between more than 2 stacked windows—like you are doing by using 3—I would recommend saving the window object from each call to pgGotoURL() so you can target a specific window at any time by a single call to pgExecuteRemote(). The PowerPac has all of this built in already so you just have to leverage these abilities.

Here is an example:


//In your first xml document you might include code like this:
if (typeof wRef == "undefined") wRef = []; //Create global array of windows
wRef[2] = pgGotoURL( "load2", "../../load2/index.html" ).contentWindow;

//In your second xml, you might include code like this to store your 3rd stacked window like this:
if (typeof top.wRef == "undefined") top.wRef = [];
top.wRef[3] = pgGotoURL( "load3", "../../load3/index.html" ).contentWindow;

//Now when you click a button in window 3 to access data in window 2 (contained in field "myObj"), you would run this code:
var result = tbfunction_pgExecuteRemote( top.wRef[2], "tbfunction_pgTBObjGet", [ "myObj", "text" ], false);
alert(result); //Should give you the current data shown in the field called "myObj"

//Of course, if you wanted to access the main window from any stacked window, you would do like you've always done it:
var result = tbfunction_pgExecuteRemote( "main", "tbfunction_pgTBObjGet", [ "response1", "text" ], false);

//Finally, if the main window needs to get data from a field called "myselect" in window 3, you would use this call:
var result = tbfunction_pgExecuteRemote( wRef[3], "tbfunction_pgTBObjGet", [ "myselect", "text" ], false);
//NOTE: You don't need to use top.wRef[3] because the main window is where the global variable wRef[] is stored.

The attached zip file takes your original approach and modifies it to use something similar to what is shown above.

NOTE: I don't like to use top[var] to store data as it is possible that an embedded application won't understand or be able access the top window and a security exception may be thrown. However, in your test example this isn't a problem and may never be a problem depending on how you organize your windows.

A lot of this kind of thing is being done in my LearnToType Today program. It passes data between just two windows, but it also makes extensive use of encrypted session variables.

Hopefully, this gives you some additional insight in how to manipulate multiple windows.
 

[John Robin Dove]

Thank you very much for your help once again.
John