CODEWITHSUNDEEP
javascript
dunnza
dunnza

Reputation: 476

How would I use JavaScript to retrieve text from a different website?

Disclaimer: please excuse the religious aspects of this post.

Anyway, the title says what I'm looking for essentially. I'm writing a program to find Bible references on a page, then display the actual verse in a tooltip upon mouseover of the reference.

I'm hoping to get permission from this site eventually. Now, I've done research and I learned about the "Same Origin Policy"; but as far as I can tell this doesn't really apply because I'm not trying to call functions/methods from JavaScript on that site.

All I want to do is grab a verse off of the page. I thought this site would be convenient because it will mark individual verses with the correct url like so: http://www.drbo.org/x/d?b=drb&bk=47&ch=16&l=18. I've tried loading this up in an iframe but I couldn't for the life of me get hold of the the <span> element with class='highlight' which is, by chance, the only span on the page.

The attempt I just made today was to use JSONP in the form of:

function crossedFingers(variable) {
    alert(variable);
}

var scr = document.createElement('script');
scr.setAttribute('type', 'text/javascript');
scr.setAttribute('charset', 'utf-8');
scr.setAttribute('src', 'http://www.drbo.org/x/d?b=drb&bk=47&ch=16&l=18&callback=crossedFingers');

document.getElementsByTagName('head').item(0).appendChild(scr);

I also had a version where I had

function crossedFingers() {
    alert('hi');
}

just to see if the function actually got called and it didn't. I'm using WAMP and I have these files in the www directory, but I'm not sure that should effect it. Any help would be appreciated, sorry if this in an inappropriate question!

I've just been frustrated. @_@

Upvotes: 1

Views: 7146

Answers (3)

Miquel Cap&#243; Casasnovas
Miquel Cap&#243; Casasnovas

Reputation: 51

Here a simple async function to retrieve the document

function urlToHTML(url){

    return new Promise((res, rej)=>{

        let iframe = document.createElement("iframe")

        iframe.style.visibility = "hidden"
       
        document.body.appendChild(iframe)
    
        iframe.addEventListener("load", ()=>{
            res(iframe.ownerDocument)
        })

       iframe.src = url
    

    })
   
    

}


urlToHTML(url)
.then(doc=>{
// do something with the document
})

Upvotes: 0

NullUserException
NullUserException

Reputation: 85478

This is exactly what the Same Origin Policy tries to prevent. It won't let you do it, pure and simple. Imagine if you could "just retrieve text" from an online banking website... That wouldn't go well.

JSONP only works when the other website allows it. Even then, you are leaving yourself open to a host of vulnerabilities. For starters, this allows the target site to inject arbitrary code into your website. You should only use this if you absolutely trust the other website.

A better solution is to use regular AJAX and have your server fetch the contents from the remote website (eg: using cURL) and relay them back to the client.

Upvotes: 4

James Williams
James Williams

Reputation: 4216

Javascript is a client-side language and normally cannot make cross-domain queries. With AJAX it was possible to do it with something like the following code.

<iframe id="holder" style="display: none">

<script type="text/javascript">
$("#holder").load("http://www.drbo.org/x/d?b=drb&bk=47&ch=16&l=18",function () {
 $link = $("#holder").contents().find("span.highlight");
});
</script>

And then using javascript to disect the elements. But with recent cross-domain policies this has been getting harder. You may have to change and use a server-side language like php to do a curl request and grab the information. PHP would be quicker.

Upvotes: 1

Related Questions