0

I have a url (example: http://google.com), How can I get the content using the Javascript and store the content to created object(String).

Example html:

<html>
<head>
    <title>testing</title>
</head>
<body>
    <h1>testing1</h1>
    <h2>testing2</h2>
    <table>
        <tr>
            <th>Title1</th>
            <th>Title2</th>
        </tr>
        <tr>
            <td>testing3</td>
            <td>testing4</td>
        </tr>
    </table>
</body>
</html>

html content to String:

<script>
var object = urlContent //MARK: urlContent will be html content 

console.log(urlContent);
//Result: <h1>testing1</h1><h2>testing2</h2><table><tr><th>Title1</th><th>Title2</th></tr><tr><td>testing3</td><td>testing4</td></tr></table>
</script>
ShingHung
  • 337
  • 1
  • 5
  • 14
  • like; var content = encodeURI(urlContent); , but you cannot get content from another domain so easily; read about CORS – A.T. Nov 06 '17 at 11:59
  • By url content do you mean to get the url as a string or get the HTML from that url? – Nick Parsons Nov 06 '17 at 12:02
  • May be this is what you are looking for https://stackoverflow.com/questions/10642289/return-html-content-as-a-string-given-url-javascript-function and https://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements – gusaindpk Nov 06 '17 at 12:08
  • @gusaindpk I think the first link can help me, but in the xmlhttp.send(); link I have two error: 1. XMLHttpRequest cannot load http://www.hko.gov.hk/m/home_uc.htm. Origin null is not allowed by Access-Control-Allow-Origin. 2. NetworkError (DOM Exception 19): A network error occurred. could you please tell me how can I fix this? – ShingHung Nov 07 '17 at 04:46

1 Answers1

0

You have to set Access-Control-Allow-Origin header to make it work. Sample Code

        function httpGet(theUrl) {
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5 
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { return xmlhttp.responseText; }
        }
        xmlhttp.open("GET", theUrl, true);
        xmlhttp.setRequestHeader('Access-Control-Allow-Origin', '*');
        xmlhttp.send();
    };

    httpGet('YOUR URL HERE');

Also the request should be same domain or your server should support cross domain request.

gusaindpk
  • 1,243
  • 2
  • 13
  • 31
  • I'm getting the government web page data. I'm adding the xmlhttp.setRequestHeader coding. But I have two error. 1.Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. 2. XMLHttpRequest cannot load http://www.hko.gov.hk/m/home_uc.htm. Origin null is not allowed by Access-Control-Allow-Origin. – ShingHung Nov 07 '17 at 19:10
  • I'm adding this coding: xmlhttp.setRequestHeader('Access-Control-Allow-Origin', '*'); – ShingHung Nov 07 '17 at 19:10
  • I think you are directly opening your html file in the browser, that is why you are getting that error. *Also the URL which you are requesting that hosting server has to allow you to do a cors request*. You can use host your html file and try once.https://stackoverflow.com/questions/18945158/chrome-origin-null-is-not-allowed-by-access-control-allow-origin – gusaindpk Nov 08 '17 at 07:09
  • I'm using the .html with javescript and I have no the local server, For my case, I want to open my html file in my computer, the html will get the selected URL can get the content. I can't set up a localserver, so I need use the .html file and get data of hko.gov.hk/m/home_uc.htm in javascript only – ShingHung Nov 08 '17 at 08:09
  • You can chrome.exe --allow-file-access-from-files if you are using windows and chrome(not recommended), setting up server is easy will not take much time, please see the link https://www.npmjs.com/package/http-server – gusaindpk Nov 08 '17 at 11:03