URL 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").getFrame().contentWindow.document.getElementById("A")...
            } else {
                dhxLayout.cells("a").getFrame().contentDocument.getElementById("A")...
            }
            // calling function from inner.html
            dhxLayout.cells("a").getFrame().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).getFrame();
// layout
ifr = dhxLayout.cells(id).getFrame();
// accordion
ifr = dhxAcc.cells(id).getFrame();
// tabbar
ifr = dhxTabbar.cells(id).getFrame();

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