[HTML & CSS] steal a div from another website.

[WillLTT]

in startsiden.no there is a div called "main_news" i want to have in my html.

 

How do i steal it and add it to my site.

 

before you recommend ajax, i have no idea how to use ajax, ive tried to understand.. but i cant seem to understand it

[mariushm]

What you would normally do is write a small script (in PHP or Python or whatever) and that script runs on the server you're using to serve your website.

You download the main page of that website, you parse it to find the main_news div, you copy it out of the page and save it on your website into a database or as a separate file. You store somewhere (database, file) the time when you last retrieved the page so that you won't retrieve it again for a few hours as you don't want to retrieve that page 100 times a minute if your website is accessed by 100 people within a minute.

On your main website you could simply have an iframe which links to your_website.com/grab_news.php  where grab_news.php is your script

 

your grab_news.php script does this:

* check if a cached copy exists, if not GRAB DATA

* check when the cached copy was made. Is it older than XX minutes/hours? If yes, go to GRAB DATA

* read the data , generate a html page formatted to fit your tiny area where you want to display this stuff

* serve the html page to the user, close the connection

 

GRAB DATA : acccess website and extract div, parse it, edit the links, save to disk and save somewhere the time of download.

 

 

The alternative is to have Javascript on your webpage which runs in the background and downloads the page, then parses the pages to extract that div, edits those links and CSS rules and then inserts that div into your page within another placeholder div.

This way, instead of your server requesting that website every [period of time] to refresh contents, each user grabs the page every time they access your website, so the info will be new all the time, but the downside is that it may take a few seconds for their computer to download the page, then for your script to parse the page and extract the info and inject it on your page... and for those seconds you would have some empty space on your page

[WillLTT]

11 hours ago, mariushm said:

--snip--

ok. i understood some of that, but not a lot. I understand i need grab_news.php,

I still need the code to build grab_news.php.

 

you mentioned 

Quote

* check if a cached copy exists, if not GRAB DATA

* check when the cached copy was made. Is it older than XX minutes/hours? If yes, go to GRAB DATA

* read the data , generate a html page formatted to fit your tiny area where you want to display this stuff

* serve the html page to the user, close the connection

im using a local html file.

im not running a server.

 

Please eloborate and show some example code i can use.

[jslowik]

Any particular reason you're looking to do this? Kind of feels like it might be a bit unethical. Unless it's just an exercise in learning to page scrape or something to that effect.

 

It's not going to be a simple thing to do.

[0x21]

Here you go:

(function() {
  var xhr = new XMLHttpRequest();

  if (!xhr) {
    console.error('Cannot create XMLHTTP instance');
    return false;
  }

  xhr.onreadystatechange = extractNews;
  xhr.open('GET', 'https://www.startsiden.no');
  xhr.responseType = 'document';
  xhr.send();

  function extractNews() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        // Insert this into DOM
        // xhr.responseXML.all.namedItem('main_news');
      } else {
        console.error('There was a problem with the request.');
      }
    }
  }
})();

This will get you div#main_news, now you just have to insert it into your document.

[WillLTT]

2 hours ago, Serjeant said:

--snip--

 

xhr.responseXML.all.namedItem('main_news');

isnt html?, i assume you mean document by DOM. (or do you mean HTML DOM appendChild() ??)

thank you for your help!

but unfortunatly im too stupid to figure out how to use it

can you eloborate further?

[WillLTT]

3 hours ago, jslowik said:

--snip--

somewhat, its never going to be public, but it will be hosted on my network at times.

[0x21]

28 minutes ago, WillLTT said:

xhr.responseXML.all.namedItem('main_news');

 

isnt html?, i assume you mean document by DOM. (or do you mean HTML DOM appendChild() ??)

thank you for your help!

but unfortunatly im too stupid to figure out how to use it

can you eloborate further?

It is HTML, and you can read more about it at: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest, more specifically the "HTML in XMLHttpRequest" guide.

 

Yes, use appendChild(), something like:

document.body.appendChild(xhr.responseXML.all.namedItem('main_news'));

 

[WillLTT]

20 hours ago, Serjeant said:

--snip--

i used

<script>
function wts() {
  document.body.appendChild(xhr.responseXML.all.namedItem('main_news'));
}
</script>

then

<body onload="wts();">

 

i does not work!

 

What am i doing wrong?

Please make an example in codepen.io

[0x21]

On 11/2/2019 at 5:20 PM, WillLTT said:

Please make an example

https://jsfiddle.net/ew068b1x/

[wasab]

Why don't you just go on that website, press crl+f12 to inspect element and then just copy and past that div tag? Much easier than writting JavaScript code.