CODEWITHSUNDEEP
javascriptjqueryhtmlajax
John Leake
John Leake

Reputation: 41

How to reference HTML from external webpage

I apologize in advance for the rudimentary question.

I have web page A that has a link to web page B on it. I need to locate the link to web page B (easy enough), and then store the HTML from web page B in a variable in my javascript script.

To store the HTML from web page A, I know it's a simple:

html_A = document.body.innerHTML;

How do I store the HTML from web page B? I believe I need to use AJAX correct? Or can I do it with javascript? And if it's the former, let's just assume the server for web page B allows for it.

Thank you in advance!

Upvotes: 4

Views: 214

Answers (2)

George Mauer
George Mauer

Reputation: 122052

This is only possible if web page B is on the same domain due to the same-origin policy security feature of all major browsers.

If both pages are on the same domain you could do

$.get("/uri/to/webpage/b").then(function(html) {
     //do something with the html;
});

Note that the html will be available only once the ajax request finishes inside the .then(...) function. It will NOT be available on the line after this code block.

Hard to tell without knowing more about your situation but this is rarely the correct thing to do. You might want to look into $.fn.load() (is limited by SOP) or using iframes (is not limited by SOP) as one of these might be more appropriate.

I should note that the standard way of doing this when you need access to html from another domain is to pull it down on your webserver and then re-serve it from there. That being said, it is probably a violation of that website's terms of use.

Upvotes: 2

CodeGodie
CodeGodie

Reputation: 12132

If youre trying to load HTML from a website that resides on a different server you will get a Cross-Origin Request Blocked Error. I dealt with this in the past and found a way to do it using YQL. Try it out:

//This code is located on Website A
$(document).ready(function() {
    var websiteB_url = 'http://www.somewebsite.com/page.html';
    var yql = '//query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + websiteB_url + '"') + '&format=xml&callback=?';
    $.getJSON(yql, function(data) {
        function filterDataCUSTOM(data) {
            data = data.replace(/<?\/body[^>]*>/g, '');// no body tags
            data = data.replace(/[\r|\n]+/g, ''); // no linebreaks
            return data;
        }
        if (data.results[0]) {
            var res = filterDataCUSTOM(data.results[0]);
            $("div#results").html(res);
        } else {
            console.log("Error: Could not load the page.");
        }
    });
});

Upvotes: 3

Related Questions