文字處理的方式變更HTML文件

play around

把資料夾裡面的圖形檔縮小,然後放到頁面。 分成兩種方法,獨立的js(不要 內嵌在html ) 和 配合html.

獨立的js

瀏覽器碰到 <img>標籤時的工作流程:

sequenceDiagram
  participant client
  participant server
    client->>server: img request by GET
    server->>client: response to GET with image data

這一段程式碼是從原來的(insert_pic_1.html)獨立出來

• 做法:在 DEV TAB上的SOURCE-FileSystem-單獨存放(例如,along.js.
• 目的是解釋 HTML 標籤<img> 會產生HTML request GET ，此時，並沒有http server 可以回應,因此,雖然js 的執行沒有產生錯誤,但是，參看主控台，會產生GET的網路錯誤。

修正方法1

兩個步驟

1. 設定HTTP 伺服器 - 安裝web server for chrome
2. 修改程式碼，向主機要檔案,http://localhost:8887

原來的程式碼:

for (var i=0;i<25;i++)
{
  var s ="0000000"+i.toString();  //兩個字串相加
  s=s.slice(-4);  //slice切字串 ，只保留最後4個,s 是影像圖形的檔案名稱，沒有副檔名
  s= '<img src="' +s +'.jpg" width="30%" height="30%" >';
  document.write(s);
}

對應的標籤為 <img src="0000.jpg" width="30%" height="30%" >

上面這段程式碼，只有在html中，才能執行，否則因為安全行，會被chrome(browser)阻擋。

修改成這樣

for (var i=0;i<25;i++)
{
  var s ="0000000"+i.toString();  //兩個字串相加
  s=s.slice(-4);  //slice切字串 ，只保留最後4個,s 是影像圖形的檔案名稱，沒有副檔名
  s= '<img src=http://localhost"' +s +'.jpg" width="30%" height="30%" >';
  document.write(s);
}

<img src="http://localhost/0000.jpg" width="30%" height="30%" >

修正方法2

@import "insertPic1b.html" {code_block=true class="line-numbers"}

by select file to show

說明和測試檔案

從 file_name_test.hmtl 到 file_name_test_3.html。

最後完成檔案

test 1只是看看事件,和觸發函數,參考。

多個檔案

test 2

但是問題是,沒有路徑名稱,所以如果,我們的HTML檔案,和圖形不在同個子目錄下面,無法利用之前的方式，例如 img src="位置" 開啟圖檔。

補充

參考

可以選擇檔案的HTML標籤

<input type=file>

file_name_test.html @import "file_name_test.html" {code_block=true class="line-numbers"}

file_name_test_2.html @import "file_name_test_2.html" {code_block=true class="line-numbers"}

file_name_test_3.html @import "file_name_test_3.html" {code_block=true class="line-numbers"}

DOM