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黑科技把其他無關元素去掉只顯示這一塊。
如果你是要完全寫到自己的網站裡去的話，只能自己排版了。