DHTMLX Docs & Samples Explorer

Index
dhtmlxlayout
Content Attaching

# URL Attaching

Sometimes it's needed to display a web page in a layout's item. The attachURL() method is used for this purpose:

    dhxLayout.cells("a").attachURL("http://www.google.com/");

## Inner Content Accessing

Assume, we have HTML page - inner.html

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

And with the attachURL() method, we can access to the object “A” from the other page (index.html).

    <script>
                var dhxLayout = new dhtmlXLayoutObject(...);
                ...
                dhxLayout.cells("a").attachURL("inner.html", true);
                // accessing <div id="A">
                if (_isIE) {
                    dhxLayout.cells("a")._frame.contentWindow.document.getElementById("A")...
                } else {
                    dhxLayout.cells("a")._frame.contentDocument.getElementById("A")...
                }
                // calling function from inner.html
                dhxLayout.cells("a")._frame.contentWindow.myFunc();
    </script>

The method has the following parameters:

- “inner.html” - url (string)
- true - specifies must be used ajax query or not(true/false).

## Panel Accessing from Attached URL

If you need to make some actions with a panel from the attached URL (for example, close it by clicking some button on a page) - add the following code to the external page:

    <input type="button" value="collapse cell" onclick="collapseCell();"> // create a button

          <script>
               function collapseCell() {
                   parent.dhxLayout.cells("a").collapse(); // collapse cell "a"
               }
          </script>

DhxLayout variable should be created as a global one (in our main dhtmlxLayout script) in order to be seen by the script in the attached external page.

## IFRAME Content Access

IFRAME content is a result of attaching URLs to layout/windows.

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