how to fetch html content in js

same origin

CORS


  1. fetch('https://cdn.xgqfrms.xyz/')
  2. .then(function (response) {
  3. // The API call was successful!
  4. return response.text();
  5. })
  6. .then(function (html) {
  7. // This is the HTML from our response as a text string
  8. console.log(html);
  9. })
  10. .catch(function (err) {
  11. // There was an error
  12. console.warn('Something went wrong.', err);
  13. });
  14. fetch('https://www.cnblogs.com/xgqfrms/p/12818551.html')
  15. .then(function (response) {
  16. // The API call was successful!
  17. return response.text();
  18. })
  19. .then(function (html) {
  20. // This is the HTML from our response as a text string
  21. console.log(html);
  22. })
  23. .catch(function (err) {
  24. // There was an error
  25. console.warn('Something went wrong.', err);
  26. });

  1. fetch('https://tianqi.moji.com/weather/china/shanghai/pudong-new-district', { mode: "no-cors", })
  2. .then(function (response) {
  3. // The API call was successful!
  4. return response.text();
  5. })
  6. .then(function (html) {
  7. // This is the HTML from our response as a text string
  8. console.log(html);
  9. })
  10. .catch(function (err) {
  11. // There was an error
  12. console.warn('Something went wrong.', err);
  13. });

bug ???

  1. fetch("https://tianqi.moji.com/weather/china/guangdong/guangzhou", { mode: "no-cors", })
  2. .then(res => {
  3. console.log(`res =`, res)
  4. return res.text();
  5. })
  6. .then(html => console.log(`html =`, html.toString()))
  7. // res = Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …}
  8. // html =

fetch html


  1. fetch("https://tianqi.moji.com/weather/china/shanghai/pudong-new-district", { mode: "no-cors", })
  2. .then(res => {
  3. console.log(`res =`, res)
  4. return res.text();
  5. })
  6. .then(html => {
  7. console.log(`html =`, html)
  8. const parser = new DOMParser();
  9. const dom = parser.parseFromString(html, "text/html");
  10. console.log(`html dom =`, dom)
  11. // api data
  12. const todayWeather = dom.querySelectorAll(`.days`)[0].innerText.replace(/[\r\n]/ig, `,`).split(`,`);
  13. // ["今天", "阴", "21° / 30°", "南风", "4-5级", "55 良"]
  14. console.log(`todayWeather api datas =`, todayWeather);
  15. })
  16. .catch(err => {
  17. console.error('Failed to fetch html page content!', err);
  18. });

https://stackoverflow.com/questions/36631762/returning-html-with-fetch

https://gomakethings.com/getting-html-with-fetch-in-vanilla-js/

SSR HTML page parser bug ???

not return html string ? blob

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data

refs



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


how to fetch html content in js的更多相关文章

  1. 使用js获取伪元素的content

    在测试过程中有时候会遇到反爬虫机制,一些元素会使用伪元素,这样在定位元素的时候会定位不到,这时候就要使用js来帮助定位,获取到想要的元素 下面是部分代码 //使用js获取伪元素的content Str ...

  2. 1-7 basket.js localstorage.js缓存css、js

    basket.js 源码分析   api 使用文档: http://t3n.de/news/basketjs-performance-localstorage-515119/       一.前言 b ...

  3. basket.js 源码分析

    basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此 ...

  4. JS组件系列——Bootstrap文件上传组件:bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  5. JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

  6. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  7. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  8. JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  9. ASP.Net MVC3 图片上传详解(form.js,bootstrap)

    图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...

随机推荐

  1. 【算法】深度优先搜索(dfs)

    突然发现机房里有很多人不会暴搜(dfs),所以写一篇他们能听得懂的博客(大概?) PS:万能 yuechi ---- 大法师怎么能不会呢?! 若有错误,请 dalao 指出. 前置 我知道即使很多人都 ...

  2. Java 8新特性(Lambda,Stream API)

    由于最近总监要求学习Java 8的一些知识,就去网上找了 一套教程来学习学习,将学习结果做一个小的总结记录,方便以后使用: 1.Java 8的优点 2.Lambda表达式优点 2.1Lambda实例 ...

  3. 通过spring statemmachine 自定义构建属于自己的状态机(两种方式)

    spring 的stateMachine 相对于当前的版本,还是比较新颖的,但是对于合适的业务场景,使用起来还是十分的方便的.但是对于官网提供的文档,讲解的是十分的精简,要想更深入的了解其内部架构,只 ...

  4. ajax 用fom提交

    $.ajax({ type : "POST", url : "${ctx}/credit/LoanauditCtrl/qwe.do?hetong="+heton ...

  5. 设计模式(一)——Java单例模式(代码+源码分析)

    1)单例模式保证了 系统内存中该类只存在一个对象,节省了系统资源,对于一些需要频繁创建销毁的对象,使用单例模式可以提高系统性能 2)当想实例化一个单例类的时候,必须要记住使用相应的获取对象的方法,而不 ...

  6. 【hdu 1573】X问题(数论--拓展欧几里德 求解同余方程组的个数)

    题目:求在小于等于N的正整数中有多少个X满足:X mod a[0] = b[0], X mod a[1] = b[1], X mod a[2] = b[2], -, X mod a[i] = b[i] ...

  7. UVA1401 Remember the Word 字典树维护dp

    题目链接:https://vjudge.net/problem/UVA-1401 题目: Neal is very curious about combinatorial problems, and ...

  8. poj3693 Maximum repetition substring (后缀数组+rmq)

    Description The repetition number of a string is defined as the maximum number R such that the strin ...

  9. Codeforces Round #660 (Div. 2) Captain Flint and Treasure 拓扑排序(按照出度、入读两边拓扑排序)

    题目链接:Captain Flint and Treasure 题意: 一种操作为 选一个下标 使得ans+=a[i] 且 把a[b[i]]+a[i]   要求每个下标都进行一种这样的操作,问怎么样的 ...

  10. C. Table Decorations

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...