Attaching URL

A tab has a possibility to attach URLs. It can be done by using iFrames and AJAX calls.

In the case of iFrames call, an iFrame will be created inside of a tab, and your URL will be attached as a separate page (it will have access to your code as you will have control over the content inside of the iFrame).

In the case of AJAX call, the content returned by the server will be placed inside of a div.

a common function used for both methods is attachURL, the only difference is that the second argument is set to true for AJAX call
to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
loading is asynchronous, so to proceed with content, you need to use the onContentLoaded event

Attaching via iFrame

GET request

myTabbar.tabs(id).attachURL("page.html");

POST request without params

myTabbar.tabs(id).attachURL("page.html", null, true);

POST with params

myTabbar.tabs(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

Attaching via AJAX

GET request

myTabbar.tabs(id).attachURL("page.html", true);

POST request without params

myTabbar.tabs(id).attachURL("page.html", true, true);

POST with params

myTabbar.tabs(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Using the onContentLoaded event

As it was said above, loading is asynchronous, so to proceed with content, you need to use the onContentLoaded event:

// firstly add the event
myTabbar.attachEvent("onContentLoaded", function(id){
    // page.html is loaded, your code here
});
 
// then attach an URL
myTabbar.tabs(id).attachURL("page.html");

Accessing the attached content

This part is related to the iFrame-mode only.

Assuming the code below has been attached:

<html>
<head>
    <script>        function myFunc() {
            console.log("I'm an attached function");
        }
    </script>
</head>
<body>
    <div id="attachedObject">
        Some text here
    </div>
</body>
</html>

Firstly, you need to get an iFrame object from the cell where the attached content is located, using the getFrame method:

var iframe = myTabbar.tabs(id).getFrame();

Now you can access the elements:

// make sure an element exists
var elem = iframe.contentWindow.document.getElementById("attachedObject");
elem.innerHTML = "Some new text here";

and call some JS code:

// make sure function exists and located in the iFrame's window scope
iframe.contentWindow.someFunc();

Accessing parent from the attached page

This part is related to the iFrame-mode only.

If you need to make some actions with a tab from the attached page (for example, hide a tab by clicking some button on the page) this can be done in the following way:

<!-- this is an attached page.html -->
<script>    function controlParent() {
        parent.myTabbar.tabs(id).hide();    // hiding a tab
    }
</script>

Any variable or function can be acccessed, but make sure that it is declared in the global window scope.

Detaching URLs

Any attached URL can be detached from a tab by using the detachObject method:

// attach
myTabbar.tabs(id).attachURL("page.html");
 
// detach later
myTabbar.tabs(id).detachObject(true);

If the first parameter is set to true, the object (iFrame or a div with AJAX content) will be removed from DOM, otherwise it will be moved to document.body.