javascript - Comment transplanter directement une partie du contenu d'autres sites Web?
黄舟
黄舟 2017-06-26 10:50:44
0
3
996

Peut-être que la description du problème n'est pas très claire, par exemple, je souhaite copier l'intégralité du SF

J'ai mis ce morceau de HMTL sur mon site Web. Si SF est mis à jour, le mien sera également mis à jour, et peut-il rester cliquable ?
Ou puis-je l'implémenter uniquement en écrivant un robot pour l'explorer et en le composant moi-même ?

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

répondre à tous(3)
黄舟

Puisque le questionneur souhaite utiliser une implémentation de proxy, j'utilise ici la NodeJScouche intermédiaire comme proxy pour répondre aux besoins du questionneur.

Principe de mise en œuvre

Ajoutez une couche intermédiaire NodeJS au projet pour obtenir le contenu de la page Web SF en temps réel. Le front-end utilise Ajax pour demander cette couche intermédiaire. La couche intermédiaire récupère le HTML SF et le renvoie au front-end sous la forme d'un fichier. chaîne, et enfin la lie au DOM. Pour faire simple, il s'agit d'utiliser le serveur pour explorer le contenu de la page Web SF et le renvoyer au front-end.

Idées de mise en œuvre

Le framework ExpressJS peut être utilisé. Veuillez consulter la documentation officielle pour connaître les méthodes d'utilisation spécifiques.

Code serveur :

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

Le code front-end est encore plus simple :

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

Enfin

Ce qui précède fournit simplement une idée de mise en œuvre simple. Pour des situations spécifiques, veuillez effectuer des ajustements en fonction de vos propres scénarios techniques. Si vous utilisez d'autres langages côté serveur, vous pouvez également utiliser cette idée pour réaliser les besoins du questionneur.

学霸

Quelques façons

Tout d'abord, vous pouvez utiliser le chargement de jQuery et sélectionner uniquement la partie requise de l'identifiant

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

Deuxièmement, vous pouvez utiliser une iframe, puis utiliser une valeur négative de margin-top pour limiter le haut, de hauteur pour limiter le bas et de scrolling="no" pour désactiver le défilement. Cette méthode convient à la section médiane.

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

La troisième consiste à utiliser js pour supprimer les parties requises après avoir supprimé l'iframe. Cela convient lorsque seule une petite partie est nécessaire.

Cachez-le après extraction

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

Sélectionnez la pièce dont vous avez besoin

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

Voir : https://stackoverflow.com/que...
https://stackoverflow.com/que...

某草草

S'il est purement intégré, vous pouvez utiliser la technologie noire iframe+CSS/JS pour supprimer les autres éléments non pertinents et afficher uniquement celui-ci.
Si vous souhaitez l'écrire entièrement sur votre propre site Web, vous ne pouvez le composer que vous-même.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal