Dojo TabContainer load external site

Question

Learning Dojo and maybe overlooking something.

Have the TabContainer working, but when a tab is clicked want to load the TabContainer with an external file that is not on the same server. Like the way iframes worked. Is there anyway to do this with dojo?

Thanks! Tony

Answer 1

Set the href property of the ContentPane

Fiddle

require([
    "dijit/layout/TabContainer"
    , "dijit/layout/ContentPane"
    , "dojo/domReady!"
], function(
    TabContainer
    , ContentPane
){
    var tc = new TabContainer({
        style: "height: 100%; width: 100%;"
    }, "tc1-prog");

    var cp1 = new ContentPane({
        title: "Greeting"
        , href: "/gh/gist/response.html/8372613/"
    });
    tc.addChild(cp1);
    tc.startup();
});

If CORS isn't supported, you can create an iframe with dojo/dom-construct

Fiddle

require([
    "dijit/layout/TabContainer"
    , "dijit/layout/ContentPane"
    , "dojo/dom-construct"
    , "dojo/domReady!"
], function(
    TabContainer
    , ContentPane
    , domConstruct
){
    var tc = new TabContainer({
        style: "height: 100%; width: 100%;"
    }, "tc1-prog");

    var cp1 = new ContentPane({
        title: "CORS"
        , content: domConstruct.create("iframe", { 
            "src": "http://en.wikipedia.org/wiki/Cross-origin_resource_sharing"
            , "style": "border: 0; width: 100%; height: 100%"
        })
    });
    tc.addChild(cp1);
    tc.startup();
});