3

Prerequisites

I have a Website, that displays a page with an input and a button. On the other end is a server that exposes a very basic HTTP API. The API is called like this:

http://127.0.0.1/api/arg1/arg2/arg3

where argX are the arguments. It returns raw HTML. This HTML code needs to be inserted into the Website (another domain). There is a 

<div id="container5"></div>

on the website. The HTML needs to be inserted into this container. The code returned by the API is specifically made to be inserted into this container, as it uses CSS classes and scripts from the website, i.e.: the code is not valid for it self.

The Goal

Here is what I have: I've got the API to return what I want, and I got a small JavaScript to run on the website to change the contents of the container:

var element = document.getElementById("container5");
element.innerHTML = "New Contents";

This works so far. Now I need a way to get the HTML from the API to the page. By reading numerous SO questions, it quickly became clear that reading HTML from another URL is close to impossible in JavaScript, due to security constraints.

Is there an easy way to do this with JavaScript or do I need rethink the whole process somehow? One last constraint on my side is that I can only insert JS into the website, I can't - for example - upload a new file to the server.

Edit 1: Workaround!

I solved this for me by using a PHP intermediate file on the requesting server:

<?php
    echo file_get_contents('http://example.com');
?>

This will generate a site using the HTML content of any URL. Now the requesting site can read this by using JavaScript:

var getHTML = function ( url, callback ) {

// Feature detection
if ( !window.XMLHttpRequest ) return;

// Create new request
var xhr = new XMLHttpRequest();

// Setup callback
xhr.onload = function() {
    if ( callback && typeof( callback ) === 'function' ) {
        callback( this.responseXML );
    }
}

// Get the HTML
xhr.open( 'GET', url );
xhr.responseType = 'document';
xhr.send();

};

This modifies any element:

var element = document.getElementById("resultpage");

getHTML( 'http://localserver.org/test.php', function (response) {
    element.innerHTML = response.documentElement.innerHTML;
});
turbo
  • 1,233
  • 14
  • 36
  • Cross origin requests are not possible, but if the page offers an API than it is possible. What kinde of API it is? Is it RESTful API? Do you get JSON, XML or maybe something else from the API? – cezar Jun 25 '15 at 19:55
  • The API returns only HTML, pre-formatted to be put into the site. – turbo Jun 25 '15 at 19:57
  • @cezar - it is somewhat restful (given the OP sample URL _"127.0.0.1/api/arg1/arg2/arg3"_), and it returns HTML (given the OP's statement _"It returns raw HTML"_) – Stephen P Jun 25 '15 at 19:58
  • @StephenP I can't guess that, that is why I'm asking. REST APIs usually return JSON among others. That would be easy to parse. But HTML can be processed too. If it is a REST API than there shouldn't be a cross origin issue. – cezar Jun 25 '15 at 20:05

1 Answers1

1

Checkout CORS https://en.wikipedia.org/wiki/Cross-origin_resource_sharing also JSONP in same article.

90hex
  • 160
  • 2
  • 12