DOM 變更


<input type=”file”>

HTML5 確實提供有限的檔案對話框支援,使用 <input type="file" /> 元素,例如 multipleacceptwebkitdirectory。NW.js 擴充檔案輸入,以更好地支援原生應用程式。

注意

出於安全性考量,NW.js 擴充功能僅在 Node 框架中啟用。請參閱 NW.js 中的安全性,了解 Node 與一般框架的差異。

fileinput.value

此屬性包含本機檔案的原生路徑。

例如,你可以使用 Node.js API 讀取使用者選取的檔案

// Get the native path of the file selected by user
var fileinput = document.querySelector('input[type=file]');
var path = fileinput.value;

// Read file with Node.js API
var fs = nw.require('fs');
fs.readFile(path, 'utf8', function(err, txt) {
  if (err) {
    console.error(err);
    return;
  }

  console.log(txt);
});

fileitem.path

HTML5 提供一個 files 屬性,用於傳回在 <input> 標籤中選取的所有檔案。NW.js 在 files 中的每個檔案項目中提供一個額外的屬性 fileitem.path,也就是選取檔案的原生路徑。

var fileinput = document.querySelector('input[type=file]');
var files = fileinput.files;

for (var i = 0; i < files.length; ++i) {
  console.log(files[i].path);
}

屬性:nwdirectory

nwdirectorywebkitdirectory 有點類似,但它傳回目錄的路徑,而不是傳回目錄中的檔案。

例如

<input type="file" nwdirectory>

屬性:nwdirectorydesc

設定 nwdirectory 檔案對話方塊中標題的說明。預設為 選擇資料夾

屬性:nwsaveas

nwsaveas 會開啟一個「另存新檔」對話方塊,讓使用者輸入檔案的路徑。可以選取不存在的檔案,這與預設的檔案輸入標籤不同。

例如

<input type="file" nwsaveas>

而且你可以指定要儲存的預設檔名

<input type="file" nwsaveas="filename.txt">

屬性:nwworkingdir

使用 nwworkingdir 時,當元素被啟用時,檔案對話方塊會從指定的目錄中開始。

例如,以下程式碼可讓檔案對話方塊預設在 /home/path/ 中開啟

<input type="file" nwworkingdir="/home/path/">

oncancel 事件

當使用者取消檔案對話方塊時,會觸發此事件。

<iframe>

NW.js 擴充 <iframe> 標籤,以簡化開發原生應用程式的流程。這些功能讓應用程式可以繞過沙盒和同源政策等限制。

另請參閱 webview 標籤,了解新的 <webview> 標籤。

屬性:nwdisable

將框架和子框架設為一般框架。

注意

此屬性並不會阻止一般框架中的頁面存取其父框架和頂層框架。因此,它們仍然可以存取 Node.js API。所以通常您可能會想要將此屬性與 nwfaketop 一起使用。

屬性:nwfaketop

防止框架中的網頁存取真正的 window.parentwindow.top。它們將取得偽造的父框架和頂層框架,也就是框架本身的 window 物件。子框架也會受到影響。

此屬性通常與 nwdisable 一起使用。

屬性:nwUserAgent

覆寫載入框架和子框架中的網頁時預設的使用者代理。詳情請參閱 清單中的 user-agent

webview 標籤

已新增一些方法至 webview 標籤