åè½ä»ç»
ç½é¡µæåæåå·¥å ·æ¯ä¸æ¬¾ä¸ä¸çå¨çº¿å·¥å ·ï¼è½å¤å¿«éåç¡®å°ä»ä»»æç½é¡µä¸æåçº¯ææ¬å å®¹ãæ è®ºæ¨éè¦æåæ°é»æç« ãå客å å®¹ãææ¯ææ¡£è¿æ¯å ¶ä»ç½é¡µææ¬ï¼æ¬å·¥å ·é½è½å¸®å©æ¨é«æå®æã
主è¦ç¹æ§
- å¿«éæåï¼æ¯æä»ä»»ä½å ¬å¼ç½é¡µä¸æåææ¬å 容ï¼å¤çé度快ï¼ååºåæ¶
- çº¯ææ¬è¾åºï¼èªå¨è¿æ»¤ HTML æ ç¾ãèæ¬åæ ·å¼ï¼åªä¿çå¯è¯»çææ¬å 容
- æ ¼å¼ä¿çï¼æºè½ä¿ç段è½ç»æåæ¢è¡æ ¼å¼ï¼ç¡®ä¿ææ¬å¯è¯»æ§
- ä¸é®å¤å¶ï¼æå宿åå¯ç´æ¥å¤å¶å°åªè´´æ¿ï¼æ¹ä¾¿åç»ä½¿ç¨
- æä»¶å¯¼åºï¼æ¯æå°æåçææ¬å¯¼åºä¸º TXT æä»¶ï¼ä¾¿äºä¿ååå享
- ç»è®¡ä¿¡æ¯ï¼èªå¨ç»è®¡å符æ°ãè¯æ°ãè¡æ°çææ¬ä¿¡æ¯ï¼æ¹ä¾¿äºè§£å å®¹è§æ¨¡
- æ éå®è£ ï¼å®å ¨å¨çº¿è¿è¡ï¼æ éä¸è½½å®è£ ä»»ä½è½¯ä»¶ææä»¶
- éç§å®å ¨ï¼çº¯å端å¤çï¼æææ°æ®å¨æµè§å¨æ¬å°å¤çï¼ä¸ä¼ä¸ä¼ å°æå¡å¨
- 忍¡å¼æ¯æï¼æ¯æ URL ç´æ¥æåï¼æ¯æ CORS çç½ç«ï¼å HTML 代ç ç²è´´ä¸¤ç§æ¹å¼
使ç¨è¯´æ
åºæ¬ä½¿ç¨æ¥éª¤
- éæ©è¾å ¥æ¨¡å¼ï¼URL 模å¼ï¼ç´æ¥è¾å ¥ç½åï¼æ HTML ç²è´´æ¨¡å¼ï¼ç²è´´ HTML 代ç ï¼
- å¨è¾å ¥æ¡ä¸è¾å ¥ç½é¡µå°åæç²è´´ HTML 代ç
- ç¹å»"æåæå"æé®ææ Ctrl/Cmd + Enter å¿«æ·é®æäº¤
- çå¾ å ç§éï¼å·¥å ·ä¼èªå¨æåææ¬å 容
- æå宿åï¼å¯ä»¥å¨ç»æåºåæ¥çæåçææ¬
- 使ç¨"å¤å¶"æé®å°ææ¬å¤å¶å°åªè´´æ¿ï¼æä½¿ç¨"导åºTXT"æé®ä¿å为æä»¶
ä½¿ç¨æå·§
- æ¯æ HTTP å HTTPS åè®®çç½é¡µå°å
- 妿è¾å ¥ç URL ä¸å å«åè®®ï¼å·¥å ·ä¼èªå¨æ·»å https:// åç¼
- 妿éå° CORS éå¶æ æ³ç´æ¥è·åç½é¡µï¼å¯ä»¥ä½¿ç¨"HTML ç²è´´"模å¼ï¼å¨æµè§å¨ä¸æ F12 æå¼å¼åè å·¥å ·ï¼å¤å¶ç½é¡µç HTML 代ç åç²è´´å°å·¥å ·ä¸
- ä½¿ç¨ Ctrl/Cmd + K å¿«æ·é®å¯ä»¥å¿«éèç¦å°è¾å ¥æ¡
- ä½¿ç¨ Ctrl/Cmd + C å¿«æ·é®å¯ä»¥å¿«éå¤å¶æåç»æï¼å½ç»æåºåå¯è§æ¶ï¼
- æ Esc é®å¯ä»¥æ¸ é¤è¾å ¥æå ³éç»æåºå
éç¨åºæ¯
- å 容ç ç©¶ï¼å¿«éæåç½é¡µæç« å 容ç¨äºç ç©¶ååæ
- ææ¡£æ´çï¼å°ç½é¡µå 容转æ¢ä¸ºçº¯ææ¬æ ¼å¼ï¼ä¾¿äºç¼è¾åæ´ç
- æ°æ®ééï¼æ¹éæåå¤ä¸ªç½é¡µçææ¬å 容ç¨äºæ°æ®åæ
- å 容å¤ä»½ï¼ä¿åéè¦ç½é¡µçææ¬å 容ä½ä¸ºå¤ä»½
- æ ¼å¼è½¬æ¢ï¼å°ç½é¡µå 容转æ¢ä¸ºçº¯ææ¬æ ¼å¼ï¼å»é¤æ ¼å¼å¹²æ°
常è§é®é¢
æåçææ¬ä¸å®æ´æä¹åï¼
妿æåçææ¬ä¸å®æ´ï¼å¯è½æ¯ç±äºç½é¡µä½¿ç¨äºå¨æå è½½å 容ï¼JavaScript 渲æï¼ãæ¬å·¥å ·ä¸»è¦æåæå¡å¨è¿åç HTML å 容ï¼å¯¹äºéè¦ JavaScript æ§è¡åæè½æ¾ç¤ºçå 容ï¼å¯è½æ æ³å®å ¨æåã建议å°è¯ä½¿ç¨æµè§å¨çå¼åè å·¥å ·æ¥çç½é¡µæºä»£ç ã
为ä»ä¹æäºç½é¡µæ æ³æåï¼
å¯è½çåå å æ¬ï¼ç½é¡µè®¾ç½®äº CORS éå¶ï¼è·¨å访é®éå¶ï¼ãç½é¡µéè¦ç»å½æè½è®¿é®ãç½é¡µä½¿ç¨äºå¤æç JavaScript 卿å è½½ãç½ç»è¿æ¥é®é¢çã妿éå° CORS éå¶ï¼è¯·ä½¿ç¨"HTML ç²è´´"模å¼ï¼å¨æµè§å¨ä¸æå¼ç®æ ç½é¡µï¼æ F12 æå¼å¼åè å·¥å ·ï¼å¤å¶ HTML 代ç åç²è´´å°å·¥å ·ä¸æåã
æåçææ¬æ ¼å¼æ··ä¹±æä¹åï¼
å·¥å ·ä¼èªå¨å¤ç大é¨åæ ¼å¼é®é¢ï¼ä½æäºç¹æ®æ ¼å¼çç½é¡µå¯è½ä¼å¯¼è´æåç»æä¸å¤çæ³ãæ¨å¯ä»¥æå¨è°æ´æååçææ¬ï¼æè ä½¿ç¨ææ¬ç¼è¾å¨è¿è¡è¿ä¸æ¥æ ¼å¼åã
æåçå 容ä¼ä¿ååï¼
ä¸ä¼ãæ¬å·¥å ·æ¯å®å ¨çº¯å端çå®ç°ï¼ææå¤çé½å¨æ¨çæµè§å¨æ¬å°å®æï¼ä¸ä¼ä¸ä¼ 任使°æ®å°æå¡å¨ãæåçå 容åªä¼å¨æ¨çæµè§å¨ä¸æ¾ç¤ºï¼æ¨å¯ä»¥èªè¡å³å®æ¯å¦å¤å¶æå¯¼åºä¿åã
æ¯ææååªäºç±»åçç½é¡µï¼
æ¯ææå大é¨åå ¬å¼å¯è®¿é®çç½é¡µï¼å æ¬æ°é»ç½ç«ãå客ã论åãææ¡£ç½ç«çã䏿¯æéè¦ç»å½ç页é¢ãåä¿æ¤ç页颿éè¦ç¹æ®æéæè½è®¿é®ç页é¢ã
æåéåº¦æ ¢æ¯ä»ä¹åå ï¼
æåé度主è¦åå³äºç®æ ç½é¡µçååºé度åå 容大å°ã妿ç½é¡µå 容è¾å¤ææå¡å¨ååºè¾æ ¢ï¼æåæ¶é´å¯è½ä¼ç¸åºå»¶é¿ãé常æåä¸ä¸ªæ®éç½é¡µçææ¬å 容éè¦ 2-5 ç§ã
ææ¯è¯´æ
æ¬å·¥å ·éç¨çº¯å端å¤çæ¹å¼ï¼éè¿æµè§å¨å ç½®ç DOMParser API è§£æ HTMLï¼è½å¤åç¡®è¯å«åæåç½é¡µä¸ç主è¦å 容ï¼èªå¨è¿æ»¤æ å ³ç HTML æ ç¾ãèæ¬ä»£ç ãæ ·å¼ä¿¡æ¯çï¼åªä¿çç¨æ·çæ£éè¦çææ¬å 容ã
å·¥ä½åç
å·¥å ·æ¯æä¸¤ç§å·¥ä½æ¨¡å¼ï¼1) URL 模å¼ï¼ç´æ¥éè¿ fetch API è·åç®æ ç½é¡µç HTML æºä»£ç ï¼éè¦ç½ç«æ¯æ CORSï¼ï¼2) HTML ç²è´´æ¨¡å¼ï¼ç¨æ·æå¨ç²è´´ HTML 代ç ãç¶åä½¿ç¨ DOMParser è§£æ HTMLï¼ç§»é¤èæ¬ãæ ·å¼çæ å ³å ç´ ï¼æåçº¯ææ¬å¹¶ä¿çåºæ¬ç段è½ç»æã
éç§ä¿æ¤
æä»¬éè§ç¨æ·éç§ï¼æææåæä½é½å¨æ¨çæµè§å¨æ¬å°å®æï¼ä¸ä¼ä¸ä¼ 任使°æ®å°æå¡å¨ãæåçå 容ä¸ä¼ä¿åå°ä»»ä½æå¡å¨ï¼ææå¤çé½å¨æ¬å°è¿è¡ãæä»¬ä¸ä¼æ¶éæåæç¨æ·æåçå 容ã