文章轉自:http://breezylee.iteye.com/blog/1762811

在父頁面點個連結能動態看到子頁面的情況太簡單，請看easyUI官網：http://www.jeasyui.com/tutorial/layout/tabs2.php
現在說的是在子頁面點個按鈕也能觸發增加子頁面的情況。
情景是，在父頁面上有個div如：

1. <div class="easyui-tabs" id="main" fit="true" border="false">  
2. 　　<div title="Welcome" iconCls="icon-page" style
   ="padding:20px;overflow:hidden;">    
3. 　　</div>  
4. </div>  

 在子頁面上有個

1. <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="testAddSubPage('new tab','http://www.baidu.com')">test add subpage</a>    

 現在想點這個連結能彈出一個新的tab，tab裡面的內容是百度主頁。關鍵的問題來了，就是testAddSubPage這個function怎麼寫。

直接這樣寫是不行的：

1. function testAddSubPage(title,url){  
2.             var parentMain = window.parent.document.getElementById("main");  
3.             var $main = $(parentMain);  
4.             var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>'
   ;   
5.             $main.tabs('add',{  
6.                     title:title,  
7.                     content:content,  
8.                     closable:true  
9.                 }  
10.             );  
11.         }  

 這裡雖然可以取到父頁面那個id為main的div物件，但是把這個dom物件轉化為jquery物件$main之後，$main.tabs('add',{...})這個方法死法報錯不能通過。

改正的關鍵是用top.jQuery這個函式，這個函式具體出外我忘記了，用法看似是取得整個父頁面物件，正確是寫法：

1. function testAddSubPage(title,url){    
2.             var jq = top.jQuery;    
3.             if (jq("#main").tabs('exists', title)){    
4.                 jq("#main").tabs('select', title);    
5.             } else {  
6.                   var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';     
7.                    jq("#main").tabs('add',{    
8.                                       title:title,    
9.                                       content:content,    
10.                                       closable:true    
11.                                     });    
12.              }    
13.         }