javascript - 如何直接移植其他网站的部分区域内容？

Question

可能问题描述的不是很清楚，比如我要整个复制SF的

这一块HMTL到我的网站里，如果SF更新了，我的也跟着更新，而且能保持可点击的状态？
还是只能写爬虫抓取后自己排版来实现？

Answer 1

鉴于题主想要使用代理实现，我在这里使用NodeJS中间层做代理，实现题主的需求。

实现原理

给项目加个NodeJS中间层，实时获取SF网页内容，前端使用Ajax请求此中间层，中间层得到SF的html之后以字符串的形式返回到前端，最后绑定到DOM即可。简单来说，就是使用服务端去抓取SF网页内容，返回给前端。

实现思路

可以使用ExpressJS框架，具体的使用方式请查看官方文档。

服务端代码：

var express = require('express');
var app = express();
var request = require('request');

//定义路由，供前端ajax调用
app.get('/sf', function(req, res, next) {
  //请求sf网页内容
  request({url: req.query.url, encoding : null}, function(err, response, body) {
    if (!err && response.statusCode == 200) {
      req.body.sfHtml = res.body;
    }
  });
  next();
}, function (req, res) {
  //获取到返回值之和以json的形式返回给前端
  res.json({sfHtml: req.body.sfHtml});
});

//启动服务
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

前端代码就更简单了：

$(document).ready(function(){
  $.ajax({
      url:"/sf?url=http://sfurl.cn",
      success: function(res){
          //这里拿到Node服务端返回的sf html内容
          console.info(res.sfHtml);
      }
  });
});

最后

以上只是提供一个简单的实现思路，具体的情况请题主结合自己的技术场景做调整，假如使用的是其它服务端语言，同样也是可以使用这种思路去实现题主的需求。

Answer 2

几个办法

第一，可以使用 jQuery 的 load 然后只选取需要部分的 id

$('#目标位置id').load('http://www.mywebsite.com/portfolio.php #需要的内容id');

第二， 可以用 iframe 然后用 margin-top 负值限定上方，height 限定下方, scrolling="no" 禁止滚动即可。这个方法适合中间横截一部分。

<p style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">
<iframe scrolling="no" src="http://www.w3schools.com/css/default.asp" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;">
</iframe>
</p>

第三就是 iframe 取出以后，用 js 取出需要部分部分。这个适合于只需要其中一小块部分的时候。

提取后先藏起来

<p id="PlaceToPutTable"></p>
<iframe id="iframe" src="urlofpagewithtableonit.html" style="display:hidden;"></iframe>

选取需要的部分

var iframe = document.getElementById("iframe");
var p = document.getElementById("PlaceToPutTable");
p.innerHTML = iframe.contentWindow.document.getElementById("KnowpName").innerHTML;

参看：https://stackoverflow.com/que...
https://stackoverflow.com/que...

Answer 3

如果纯粹是嵌入的话，可以使用iframe+CSS/JS黑科技把其他无关元素去掉只显示这一块。
如果你是要完全写到自己的网站里去的话，只能自己排版了。