URL 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";