代碼編輯器：本地JS文件上傳並加載到頁面

最近在做在線代碼編輯器的時候，有個需求是使用者可以上傳引用本地的 js 文件，進而在編輯器中使用這個文件定義的變量或方法。后來經過摸索，選擇使用 FileReader 對象解決問題。

FileReader MDN:
FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。
其中File對象可以是來自用戶在一個<input>元素上選擇文件后返回的FileList對象,也可以來自拖放操作生成的 DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法后返回結果。

思路

• 通過 <input> 控件獲取用戶上傳的文件對象
• 利用 FileReader 對象的 readAsDataURL(file) 方法獲取文件以數據URI形式保存的一串字符串。
• 生成 <script> 標簽。
• 將字符串賦值到 <script> 標簽的 src 屬性，標簽動態加載到頁面。

實現

<input id="file" type="file" onchange="handler()"/>

function handler(){
    let file = document.getElementById("file").files[0]
    let r = new FileReader()
	r.readAsDataURL(file, 'UTF-8')
	r.onload = () => {//讀取操作完成回調方法 加載script標簽
    	    let script = document.createElement('script')
    	    let head = document.getElementsByTagName('head')[0]
    	    script.src = r.result//內容保存在result中
    	    head.appendChild(script)
	}
}