asked    Hugo     2018-10-22       javascript       47 view        3 Answers

[SOLVED] Get data from another HTML page

I am making an on-line shop for selling magazines, and I need to show the image of the magazine. For that, I would like to show the same image that is shown in the website of the company that distributes the magazines.

For that, it would be easy with an absolute path, like this:

<img src="" />

But, it is not possible in my case, because the name of the image changes everytime there is a new magazine.

In Javascript, it is possible to get the path of an image with this code:

var strImage = document.getElementById('Image').src;

But, is it possible to use something similar to get the path of an image if it is in another HTML page?

  3 Answers  

        answered    Jack     2018-10-22      

Assuming that you know how to find the correct image in the magazine website's DOM (otherwise, forget it):

  • the magazine website must explicitly allow clients showing your website to fetch their content by enabling CORS
  • you fetch their HTML -> gets you a stream of text
  • parse it with DOMParser -> gets you a Document
  • using your knowledge or their layout (or good heuristics, if you're feeling lucky), use regular DOM navigation to find the image and get its src attribute

I'm not going to detail any of those steps (there are already lots of SO answers around), especially since you haven't described a specific issue you may have with the technical part.



        answered    Mona     2018-10-22      

You can, but it is inefficient. You would have to do a request to load all the HTML of that other page and then in that HTML find the image you are looking for.

It can be achieved (using XMLHttpRequest or fetch), but I would maybe try to find a more efficient way.



        answered    Ian     2018-10-22      

What you are asking for is technically possible, and other answers have already gone into the details about how you could accomplish this.

What I'd like to go over in this answer is how you probably should architect this given the requirements that you described. Keep in mind that what I am describing is one way to do this, there are certainly other correct methods as well.

Create a database on the server where your app will live. A simple MySQL DB will work, but you could use anything. Create a table called magazine, with a column url. Your code would pull the url from this DB. Whenever the magazine URL changes, just update the DB and the code itself won't need to be changed.

Your front-end code needs some sort of way to access the DB. One possible solution is a REST API. This code would query the DB for the latest values (in your case magazine URLs), and make them accessible to your web page. This could be done in a myriad of different languages/frameworks, here's a good tutorial on doing something like this in Node.js and express (which is what I'd personally use).

Finally, your front-end code needs to call your REST API to get the updated URLs. This needs to be done with some kind of JavaScript based language. jQuery would make this really easy, something like this:

$(document).ready(function() {
  $.Get("http://uri_to_your_rest_api", function(data) {
    $("#myImage").attr("scr", data.url);
  }
});

Assuming you had HTML like this:

<img id="myImage" src="">

And there you go - You have a webpage that pulls the image sources dynamically from your database.

Now if you're just dipping your toes into web development, this may seem a bit overwhelming. But I promise you, in the long run it'll be easier then trying to parse code from an HTML page :)





Your Answer





 2018-10-22         Ruby

Sliding Menu in React

I want to create a file separator styled menu in react. I'm not very familiar with css, so i need a starting point. I have found many such menu components but all of them are full page.I dont understand how to create the shape of the component, if it were a simple rectangle it would be possible, but the shape is the rectangle plus the button, i dont know how to manage that.It will look something like this :Alter clicking on "Filter Menu", it will slide into view: That is actually a CSS/HTML only question.However, to develop from scratch:Draw a two column table and have ...
 javascript                     2 answers                     23 view
 2018-10-22         Samantha

React : new date() shows date of client machine rather than server

This question already has an answer here: What time zone does the Javascript new Date() use? 4 answers That is how javascript date works. Please refer to MDN docs for Date for more details. Also checkout the the parameters you can send to customize it. If no arguments are provided, the constructor creates a JavaScript Date object for the current date and time according to system settings for timezone offset Where Date is called as a constructor with more than one argument, the speci...
 javascript                     1 answers                     24 view
 2018-10-22         Eunice

Argument of type 'any[]' is not assignable to parameter of type 'A'. Property 'a' is missing in type 'any[]'

I'm a very beginner in TypeScript and now I'm trying to understand how interfaces works in a Class Method of React Component. I created a simple case for it, but it does not work. I always gets an error like in this post title.I'll be pleased for any help.import React, { Component } from 'react'interface A { a: any[]}class Test extends Component { _getName = (a: A) => { return a } render() { const a = [] return ( <div>{this._getName(a)}</div> ) }}export default Test this._getName(a) expects a to be of type A. A is defined as an object...
 javascript                     3 answers                     25 view