0

I am working on old web page (in html and java script) which are using frameset and frames, company doesn't want to be redo everything. The main page has two frames, treeFrame which has menu (it's a large menu, which has (1.) pop over menu on top and (2.) menu for each selected product in file explorer like view) and another frame docFrame shows selected products document or custom document not found page.

When user clicks on some document icon in treeFrame, a pdf is shown in document frame using this

<a href="../pdf/example.pdf" target="docFrame"></a>

I want to make treeFrame collapse and expand on click some new button (I am free to place it anywhere, in any frame), so user can better view document frame. And I need it to support above functionality as well. The target device is touch enabled monitors. Also target device will have files locally as well, so it should work independently without internet so I can't add jQuery (I guess). The server is windows server 2003.

After looking online, I found that it's not possible to communicate between frames. If so, What are my options to replace frames and still be able to do something like above? If no, how can I minimize frame size by putting a button.

So far I tried this, (did not work)

I added this section in my treeFrame

<button type = "button" onclick="send()";>Collapse</button>
<script>
    var port;
    onmessage = function(e) 
    {
        port = e.ports[0];
    }

    function send()
    {
        port.postMessage("clicked");
    }
</script>

and this part in main html file

<frameset cols="520,*">
    <frame src="tree.html" name="treeFrame" target="_self">
    <frame src="documents.htm" name="docFrame " target="right">
</frameset>
<script>
    var channel = new MessageChannel();
    var treeframe = $(".treeframe")[0].contentWindow;
    var origCols = null;

    treeframe.onload = function() 
    {
        this.postMessage("","*", [channel.port2])
    };

    channel.port1.onmessage = function(e) 
    {
        if (e.data === "clicked") 
        {
            if(origCols!=null)
                showFrame()
            else
                hideFrame();
        }
    }

    function hideFrame() {
        var frameset = document.getElementById("frameSet");
        origCols = frameset.cols;
        frameset.cols = "0, *";
    }

    function showFrame() 
    {
        document.getElementById("frameSet").cols = origCols;
        origCols = null;
    }
</script>
Ruturaj
  • 630
  • 1
  • 6
  • 20
  • What should `` be replaced with? Do you mean remove `` though still load `href` of `a` element within same `document`? – guest271314 Oct 23 '16 at 22:04
  • I have updated the question. – Ruturaj Oct 23 '16 at 22:20
  • _"After looking online, I found that it's not possible to communicate between frames."_ It is possible to communicate between frames, see [How to clear the contents of an iFrame from another iFrame](http://stackoverflow.com/questions/33645685/how-to-clear-the-contents-of-an-iframe-from-another-iframe/33649349#33649349) – guest271314 Oct 23 '16 at 22:32
  • It looks similar to what I tried, in quick look, I am reading the whole content and will try it out. – Ruturaj Oct 23 '16 at 22:37
  • @guest271314 The port is not getting initialized, I am getting, Cannot read property 'postMessage' of undefined. I have updated question to reflect what I did. – Ruturaj Oct 23 '16 at 23:34
  • No element at `html` has `className` `"treeFrame"`. Did you mean `$("[name=treeFrame]")`? – guest271314 Oct 23 '16 at 23:35
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126479/discussion-between-ruturaj-and-guest271314). – Ruturaj Oct 23 '16 at 23:38
  • The problem with my implementation was script was not inside of body or head. Moved it in to head and it worked. Still thinking about changing frame to iframe. – Ruturaj Oct 26 '16 at 21:14

0 Answers0