DHTMLX Docs & Samples Explorer

Index
dhtmlxAccordion
Content Attaching

# URL attaching

Sometimes it needs to display a web page in an Accordion's item. The attachURL() method is used for this purpose in the following way:

    dhxAccord.cells(itemId).attachURL(url);

## Accessing Inner Content

Any object on the external page attached with the attachURL() method can be accessed like this:

- Page inner.html

        ...
    <div id = "A">...</div>
    <script>
       function myFunc() {
       ...
       }
    </script>
     ...

- Page index.html

    <script>
        var dhxAccord = new dhtmlXAccordion(...);
        ...
        dhxAccord.addItem("a1", "item_text");
        ...
        dhxAccord.cells("a1").attachURL("inner.html");
        // accessing <div id="A">
        if (_isIE) {
              dhxAccord.cells("a1").win._frame.contentWindow.document.getElementById("A")...
        }
        else {
              dhxAccord.cells("a1").win._frame.contentDocument.getElementById("A")...
        }
        // calling function from inner.html
        dhxAccord.cells("a1").win._frame.contentWindow.myFunc();
    </script>

## Item Accessing from Attached URL

If you need to do some action with an item of the Accordion from the attached URL (for example, to close it by clicking some button on the page), you should write the following code lines in the attached external page:

    <input type="button" value="hide item" onclick="hideItem();"> // create a button
    <script>
        function hideItem() {
        parent.dhxAccord.cells(itemId).hide(); // hide item in question
        }
    </script>

Variable 'dhxAccord' should be created as a global one (in our main dhtmlxAccordion script) in order to be seen by the script in the attached external page.

## Access IFRAME Content

IFRAME content is a result of attaching URLs into accordion.

The follownig code is a code of the attached page inner.html:

    <html>
        <head>
            <script>
                var msg = "";
                function myFunc() {
                    alert(msg);
                }
            </script>
        </head>
        <body>
            <div id="myDiv"> </div>
        </body>
    </html>

And a page, where page inner.html will attached to, has the next code:

    // windows
    var w1 = dhxWins.createWindow(id, x ,y, w, h);
    w1.attachURL("inner.html");
    // layout
    dhxLayout.cells(id).attachURL("inner.html");
    // accordion
    dhxAcc.cells(id).attachURL("inner.html");
    // tabbar
    dhxTabbar.cells(id).attachURL("inner.html");

So to access IFRAME object - use the code:

    var ifr;
    // windows
    ifr = dhxWins.window(id)._frame;
    // layout
    ifr = dhxLayout.cells(id)._frame;
    // accordion
    ifr = dhxAcc.cells(id)._frame;
    // tabbar
    ifr = dhxTabbar.cells(id)._frame;

And to access functions/variables/objects - use the code:

    ifr.contentWindow.msg = "Popup message";
    ifr.contentWindow.myFunc();
    ifr.contentWindow.document.getElementById("myDiv").innerHTML = "Object on page";