Простой wap браузер на JavaScript

javascript fetch xml wml. parse fetch api
  1. <div id="url-bar">
  2.   <input id="url" type="text" placeholder="Enter url" value="">
  3.   <button onclick="goToUrl()">Go</button>
  4. </div>
  5. <div id="preview"></div>
  1. body {
  2.   font-family: Helvetica, Arial, sans-serif;
  3.   color: #2c3e50;
  4. }
  5. #url-bar {
  6.   display: flex;
  7.   justify-content: center;
  8.   margin: 0;
  9.   padding: 0.6em 0;
  10.   border-bottom: 1px dashed #4fc08d;
  11. }
  12. #url-bar input,
  13. #url-bar button {
  14.   background: none;
  15.   color: #4fc08d;
  16.   border: solid 1px;
  17.   border-radius: 2em;
  18.   font: inherit;
  19.   padding: 0.45em 1.5em;
  20.   margin: 0 0.2em;
  21. }
  22. #preview {
  23.   max-width: 480px;
  24.   margin: 0 auto;
  25. }
  1. function setUrl(url) {
  2.   window.url.value = url;
  3.   goToUrl();
  4. }
  5. function goToUrl() {
  6.   let currentUrl = window.url.value.replace("http://", "").replace("https://", "");
  7.   if (currentUrl.endsWith("/")) currentUrl = currentUrl.slice(0, -1);
  8.   const baseUrl = urlToBaseUrl(currentUrl);
  9.  
  10.   const parser = new DOMParser();
  11.   fetch("https://cors-anywhere.herokuapp.com/" + currentUrl, {
  12.       headers: {
  13.         'Content-Type': 'text/xml'
  14.       }
  15.     })
  16.     .then(r => r.text())
  17.     .then(xml => {
  18.       const doc = parser.parseFromString(xml, "text/xml");
  19.       const card = doc.getElementsByTagName("card")[0];
  20.       document.title = card.getAttribute("title");
  21.       doc.querySelectorAll("img[src]")
  22.         .forEach(el => {
  23.           let url = el.getAttribute("src");
  24.           url = resolveUrl(currentUrl, url);
  25.           el.setAttribute("src", "http://" + url);
  26.         });
  27.       window.preview.innerHTML = card.innerHTML;
  28.       document.querySelectorAll("#preview a[href]")
  29.         .forEach(el => {
  30.           el.onclick = (e) => {
  31.             e.preventDefault();
  32.             let url = el.getAttribute("href");
  33.             url = resolveUrl(currentUrl, url);
  34.             setUrl(url);
  35.           };
  36.         });
  37.     })
  38.     .catch(err => alert(err));
  39. }
  40. function urlToBaseUrl(url) {
  41.   let idx = url.indexOf("/");
  42.   return (idx > 0) ? url.substring(0, idx) : url;
  43. }
  44. function resolveUrl(currentUrl, url) {
  45.   if (url.startsWith("/")) return urlToBaseUrl(currentUrl) + url;
  46.   if (url.startsWith("./")) return currentUrl + url.substring(1);
  47.   if (url.match(/https?:\/\/.*/) == null) return currentUrl + "/" + url;
  48.   return url;
  49. }
Простой wap браузер, который посылает запрос на указанный адрес, парсит полученный ответ, переопределяет url в адресах ссылок и изображений, а затем выводит полученный результат.
Некоторые страницы не открываются, потому что стандартный XML-парсер считает ответ невалидным.

Демо (нажать на Go):
Назад

Реклама

Мы в соцсетях

tw tg yt gt