V80403 - iframe 和 windows 的差異 - 呼叫 V20301 的子功能畫面 - iframe

iframe 和 window 在網頁開發中是兩個不同層次的概念，雖然都能顯示內容，但用途和行為差異很大：

📌 iframe

• 嵌入框架：<iframe> 是 HTML 標籤，用來在一個網頁裡嵌入另一個網頁。

• 作用範圍：它存在於同一個瀏覽器視窗中，只是頁面的一部分。

• 用途：常用來載入外部頁面、報表、或第三方內容（例如地圖、影片）。

• 限制：受同源政策影響，跨網域存取內容會有限制。

• 控制方式：透過 DOM 操作 (document.getElementById("ifrm")) 來改變 src 或內容。

📌 window

• 獨立視窗：window 是瀏覽器提供的物件，代表一個完整的瀏覽器視窗或彈出視窗。

• 作用範圍：它是最上層的容器，包含整個 DOM、iframe、script 等。

• 用途：可用來開新視窗 (window.open)、或在 ExtJS 中建立彈出視窗 (Ext.Window)。

• 控制方式：可操作整個視窗的屬性與事件，例如大小、位置、關閉。

1>*.js
{ //測試用按鈕 - 模擬 V40105 呼叫 V20301 子功能
xtype: 'button', text: '子件無架構發工', id: 'btn_V80403C',
listeners: {
click: function () {
console.log(" 2 btn_V80403B click ");
var cur_recs = Ext.getCmp('grid_Single').getSelectionModel().getSelection();
if (cur_recs.length == 0) {
mywarnalert("請先選擇資料(母AMM單號-AMMNO)");
return false;
}
cur_rec = cur_recs[0];
CALL_V20301_f_V40105(cur_rec);
}
}
},

cmp_GPASS1,

}


2>V80403.js
//此函式不可寫在 V20301 因為 id 會和 V40105 相同,
// Ext.Loader.loadScript({ url: '../JsFunction/V20301.js' }); --> 會 Error
//只能利用 iframe 的方式 , 開啟 V20301 - id 重覆沒關係

function CALL_V20301_f_V40105(cur_rec) {
    var Tmp_AMMNO = nulltoStr(cur_rec.data['AMMNO']).toString();
    var Tmp_GPASS1 = 'GPASS1';
    var ParamStr = "?FUNID=V20301&GAMMNO=" + Tmp_AMMNO + "&GPASS1=" + Tmp_GPASS1;

var win = new Ext.Window({
layout: 'fit',
id: 'win_V20301',
title: 'V20103',
closable: false,
closeAction: 'destroy',
modal: true, //有pick視窗時,下面的不能按
html: '<iframe id="ifrm" scrolling="auto" frameborder="0" width="100%" height="100%" src="/Home/CenterTab' + ParamStr + '"></iframe>',
buttons: [
{
id: 'btnClose1', text: '關閉',
handler: function () {
this.up('window').close();
}
}
]
});

win.setHeight(700);
win.setWidth(1200);
win.show();

};