CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Alex O'Brien
Alex O'Brien

Reputation: 469

Retrieve Elements From Other Sites With iframe and jQuery

I am trying to create a website which retrieves data from another website then pastes it into a table on my website. I am attempting to do this through an iframe and jQuery. Currently, I don't care about pasting the data in. I am simply trying to get jQuery to retrieve the div containing the data I need.

This is my iframe code:

<iframe id="data1" src="http://example.example" hidden="true"></iframe>

The div with the id frStatus2 is inside the body of the html document.

This is my javascript/jQuery code:

$(document).ready(function(){
var x = $('#data1').contents().find('#frStatus2').html();
console.log(x);
});

I came up with this after googling around for a while.

Thank you for your time.

Upvotes: 1

Views: 1241

Answers (1)

HellaMad
HellaMad

Reputation: 5374

You can't access the contents of the iFrame with JavaScript if its source is another website as this would break the same-origin policy. You'll need to do this on the server side. If the site you're trying to access has a JSONP API you should use that, otherwise you can implement your own.

Think about how insecure it would be if you were allowed to access the contents of the iFrame. Let's say you loaded up a bunch of bank websites, social networks, etc. in the background using this iFrame method and tested to see if any of them were logged in by parsing the HTML. You would then be able to do all sorts of nasty stuff, from transferring funds to changing passwords and scraping personal information.

The only time you can access the contents of the iFrame is if the domain, protocol, and ports all match.

Upvotes: 4

Related Questions