如何改变Dojo TabContainer的行为，简单地打开一个外部链接，而不是显示ContentPane

Question

我正在与有几个不同的ContentPane孩子的TabContainer一起工作。它们每个都配备了一个href参数，以获取外部AJAX内容时显示的选项卡被选中:

dojo.addOnLoad(function() {
    var tc_nav = new dijit.layout.TabContainer({
        style: 'width: 98%;',
        doLayout: false
    }, 'tc_nav');
    var cp1 = new dijit.layout.ContentPane({
        title: 'Test 1',
        href: 'ajax?test1',
        style: 'padding: 10px;',
        selected: true
    });
    dojo.connect(cp1, 'onShow', function() {
        cp1.refresh();
    });
    /*
     * ...
     */
    tc_nav.addChild(cp1);
    /*
     * ...
     */
    tc_nav.startup();
});

现在我想在其他选项卡中集成一个应该在其行为上不同的选项卡:而不是将内容加载到ContentPane选项卡应该遵循同一窗口中的简单链接(如<a href="http://www.google.com/">Link</a>)，留下包含js/dojo应用程序的页面。我还没有找到任何令人满意的解决方案，也没有匹配此要求的dojo小部件。最好的方法是什么?

作为一个不愉快的解决方案，我创建了一个覆盖的onShow事件，触发window.location.href = '...';:

var cp2 = new dijit.layout.ContentPane({
    title: 'Test 2',
    style: 'padding: 10px;'
});
dojo.connect(cp2, 'onShow', function() {
    window.location.href = 'http://www.google.com/';
});

这种解决方法的一个令人讨厌的缺点是首先加载ContentPane，然后设置window.location.href，这会导致非常奇怪的延迟重新加载效果，从而导致糟糕的用户体验。我想避免这个中间步骤。

Answer 1

ContentPane实际上不是iframe，所以设置window.location.href会改变整个页面(dojo app)的url，而不仅仅是ContentPane。你试过这样做吗?

cp2.set('href', 'http://www.google.com/')

Answer 2

满足上述要求的一个可能的解决方法是覆盖ContentPane的controlButton的onClick事件:

/*
 * ...
 */
var cp2 = new dijit.layout.ContentPane({
    title: 'Test 2',
    style: 'padding: 10px;'
});
/*
 * ...
 */
tc_nav.addChild(cp2);
/*
 * ...
 */
tc_nav.startup();
/*
 * ...
 */
cp2.controlButton.onClick = function() {
    window.location.href = 'http://www.google.com/';
};

请注意不要在onClick事件上附加另一个函数(例如通过dojo.connect(cp2.controlButton, 'onClick', function() { /* ... */ });)，而是要覆盖它，否则ContentPane的内容将首先被调用。

请进一步注意，必须首先调用TabContainer的startup()函数才能使controlButton对象可访问。