javascript - How to directly transplant part of the content of other websites?

Question

Maybe the description of the problem is not very clear, for example, I want to copy the entire SF

Add this piece of HMTL to my website. If SF is updated, mine will also be updated, and can it remain clickable?
Or can we only implement it by writing a crawler to crawl it and typesetting it ourselves?

Answer 1

Since the subject wants to use a proxy implementation, I use NodeJSthe middle layer as a proxy here to achieve the subject's needs.

Implementation principle

Add a NodeJS middle layer to the project to obtain the SF web page content in real time. The front end uses Ajax to request this middle layer. The middle layer gets the SF HTML and returns it to the front end in the form of a string, and finally binds it to the DOM. To put it simply, it is to use the server to crawl the SF web page content and return it to the front end.

Implementation ideas

You can use the ExpressJS framework, please check the official documentation for specific usage.

Server code:

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!');
});

The front-end code is even simpler:

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

Finally

The above just provides a simple implementation idea. For specific situations, please make adjustments according to your own technical scenarios. If you use other server-side languages, you can also use this idea to realize the needs of the questioner.

Answer 2

A few ways

First, you can use jQuery's load and select only the required part of the id

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

Second, you can use an iframe and then use a negative value of margin-top to limit the top, height to limit the bottom, and scrolling="no" to disable scrolling. This method is suitable for the middle section.

<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>

The third is to use js to remove the required parts after removing the iframe. This is suitable when only a small part of it is needed.

Hide it after extraction

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

Select the part you need

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

See: https://stackoverflow.com/que...
https://stackoverflow.com/que...

Answer 3

If it is purely embedded, you can use iframe+CSS/JS black technology to remove other irrelevant elements and only display this one.
If you want to write it completely into your own website, you can only typesetting it yourself.