Dojo TabContainer 加载外部站点答案

【问题标题】：Dojo TabContainer load external siteDojo TabContainer 加载外部站点
【发布时间】：2014-01-12 05:29:51
【问题描述】：

学习道场，也许会忽略一些东西。

让 TabContainer 正常工作，但是当单击选项卡时，希望使用不在同一服务器上的外部文件加载 TabContainer。就像 iframe 的工作方式一样。有没有办法用道场做这个？

谢谢！托尼

【问题讨论】：

标签： iframe dojo external tabcontainer

【解决方案1】：

设置ContentPane的href属性

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();
});

如果不支持CORS，您可以使用dojo/dom-construct 创建一个iframe

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();
});

【讨论】：

@Tony 这对你有帮助吗？