How to remotely use methods of an instance from another html frame

How to remotely use methods of an instance from another html frame

Hi,

I'm looking for a solution to change the selection of a tree item by clicking into a text content frame.
Just to explain:

I have 3 html files:
- 1 HTML with the FrameSet
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title> This is my title  </title>
  6.     </head>
  7.   <frameset cols="20%,*">
  8.     <frame src="src/index_toc.html" name="tocframe" id="tocframe" />
  9.     <frame src="src/index_main.html" name="main_content" id="main_content" />
  10.   </frameset>
  11. </html>
- them 2 Simple HTML Files 
      toc has the tree -->  tocframe
       index_main is just the content to read, with several chapters -->  main_content

So in the toc file there I use the "fancytree ( https://github.com/mar10/fancytree/wiki)"
  2.  <script type="text/javascript">
  3.       var mytoc= $(function(){
  4.       // Create the tree inside the <div id="tree"> element.
  5.      $("#toc").fancytree({
  6.           activeVisible: true, // Make sure, active nodes are visible (expanded).
  7.           aria: false, // Enable WAI-ARIA support.
  8.           autoActivate: true, // Automatically activate a node when it is focused (using keys).
  9.           autoCollapse: true, // Automatically collapse all siblings, when a node is expanded.
  10.           autoScroll: false, // Automatically scroll nodes into visible area.
  11.           clickFolderMode: 4, // 1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)
  12.           checkbox: false, // Show checkboxes.
  13.           debugLevel: 2, // 0:quiet, 1:normal, 2:debug
  14.           disabled: false, // Disable control
  15.           focusOnSelect: false, // Set focus when node is checked by a mouse click
  16.           generateIds: false, // Generate id attributes like <span id='fancytree-id-KEY'>
  17.           idPrefix: "ft_", // Used to generate node id´s like <span id='fancytree-id-<key>'>.
  18.           icons: false, // Display node icons.
  19.           keyboard: true, // Support keyboard navigation.
  20.           keyPathSeparator: "/", // Used by node.getKeyPath() and tree.loadKeyPath().
  21.           minExpandLevel: 1, // 1: root node is not collapsible
  22.           quicksearch: false, // Navigate to next node by typing the first letters.
  23.           selectMode: 2, // 1:single, 2:multi, 3:multi-hier
  24.           tabbable: true, // Whole tree behaves as one single control
  25.           titlesTabbable: false, // Node titles can receive keyboard focus
  26.           activate: function(event, data) {       
  27.             var node = data.node;        // Use <a> href and target attributes to load the content:        
  28.             if( node.data.href ){          // Open target          
  29.               window.open(node.data.href, node.data.target);          // or open target in iframe//         
  30.               $("[name=main_target]").attr("src", node.data.href);       
  31.             }    
  32.           }
  33.       });
  34.     });
  35.   </script>
so now on the content (index_main) I want to change the selected tree items by clicking into the text content.
So when I click somewhere in chapter 2 section 1.1 the tree item 2.1.1 in the toc frame will be selected.

  2. function add_highlighter() {
  3.   filename = "" + window.location.pathname.substr(window.location.pathname.lastIndexOf("/") + 1);
  4.   element = document.getElementsByTagName("div");
  5.   for (var i = 0; i < element.length; i++) {
  6.     p = element[i].className + "";
  7.       if (p == "chapter" || p == "book" || p == "preface" || p == "section" || p == "appendix" || p == "index") {
  8.        element[i].onmouseup = function () {
  9.        //alert(filename + "#" + this.getElementsByTagName("a")[0].id);
  10.         var frameDocument = $('frame[name="tocframe"]', top.document)[0].contentDocument;
  11.         var myTree = $('mytoc',frameDocument);
  12.         node = myTree.fancytree("getActiveNode");
  13.         node.setTitle("New title");
  14.       };   
  15.     } 
  16.   }
  17. }
I was able to change the backgroundcolor by using the frameDocument but I struggle with the instance of the fancytree.

So is it possible what I'm trying  to do?
Best regards

Markus