这个页面的效果是什么原理？

Question

http://htmlpreview.github.io/...://github.com/215566435/React-awesome-resume/blob/master/build/index.html

链接

Answer 1

网站打开来的时候，会先加载这个文件htmlpreview.min.js。

该js文件里面是一个HTMLPreview大对象。

var HTMLPreview = {
  loadHTML: function(data) {},
  send: function(file, callback) {},
  ...
};

loadHtml()调用了send()，而send()调用的是yahoo的api，https://query.yahooapis.com/v1/public/yql?...，这个yahoo的api请求就是去拿相关网站的网页内容了。等内容异步返回后，loadHtml内部执行了这么一段话，就把整个网站给重写了

document.open();
document.write(HTMLPreview.content);
document.close();