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.
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.
Related
I have a URL and I need the content inside this URL. Actually, I wish to embed the content present inside this URL. What all are the possible ways to do this without any cors issues??
I have already tried using iframes and other tricks to avoid cors issues. But still, I am not able to embed many websites in an iframe. My main aim is not to embed a website in an iframe but to embed the content inside the website URL.
I will be more than happy if there is an API which returns me back the content in a URL website.
If there is not, then how can I create such an API?? And how do I get it hosted??
As a solution to this, I created a flask app which will return me the whole website so that I can embed it in my iframe. But then it is like a proxy server and I cannot host it on Heroku because Heroku does not allow public proxy server.
Please note embedded the whole site or just the content is of similar use to me. It is just that when embedding the site, it will be interactive and in the other case, it will not. I am good with both, embedding just the content or the whole website.
Now, I am thinking to make a web crawler which will crawl the web, cache websites and store them in a database. I am thinking to host this on firebase. I have no idea about the capabilities of the firebase. I just know that it provides us with a NoSQL database and some cloud functions.
The cloud functions part interests me.
I don't know if the following is correct/feasible.
I will send the URL(whose content I need) to firebase. It will then fetch the whole website and store it in the database(so, that next time I request the same URL, it does not need to recache the whole site again) and then return me this cached content.
If there is other better way to do this, please let me know.
I need the content for my chrome extension https://github.com/Shaikh-Ubaid/InSyd
For code, please refer to this GitHub repo.
To get an idea of why I want to get content/embed content, I am attaching a gif showing the working of the extension.
<img src="https://raw.githubusercontent.com/Shaikh-Ubaid/InSyd/master/Popup-demo.gif" alt="gif" />
I'm looking to get some data from a Facebook page of a restaurant, but I'm kinda stuck. I want to load some divs from the facebook page of the restaurant, then get the ID's of the divs, since they contain some information i would like to use. Ive tried using the .load function from jQuery, but no luck. Of all the answers I've seen, they all include a url that's something like somefile.html. Is it possible to load the divs ids and some innerHTML from a live page like Facebook? Are they somehow downloading the html to a file then using that? Keep in mind I know nothing about PHP, so any solutions? Thanks!
The right way to do it would be though Facebooks graph API, take a look at this site and see if it offers the information you need https://developers.facebook.com/docs/graph-api/reference/page/
NOTE
As comments have pointed out, "web scraping" is FORBIDDEN on Facebook.com by Facebook policy. http://www.facebook.com/apps/site_scraping_tos_terms.php
Technically, I don't think this is possible with Facebook and just JavaScript.
In general, using just JavaScript, one solution would be to load the (external) site like FaceBook into an Iframe, and then grab all the DIVs and search the DOM that's loaded into the iFrame. However, I believe FaceBook (and other sites) set something called "CORS Request Headers" which prevent the page from loading into an iFrame -- also, as far as I know, this cannot be hacked around except to use another language to pull the HTML as a file (like with PHP).
Sources:
Facebook Forbids iFrames
JavaScript, Load Page in iFrame
On my JSF page I am trying to show some other website in an iframe and show its URL. I understand now that for security reasons I can only access the URL of the iframe if it is showing some site of my domain. So, I've found that problem a lot of times in the internet, but I couldn't find any solution. I don't want to read the content of the iframe, but only the URL.
Is there any solution for this requirement? Using an alternative to iframes? Frameset, browser in browser? Popup?
If you want to stick to the iframe option, I would test to see if the innerhtml of the iframe matches that of the website they are meant to reach. The innerhtml in webkit does seem to change as the user browses.
The only alternative I can think of is http proxying the web sites, changing the links to refer to your proxy, then telling them they win when the requested proxy URL matches that of the destination.
I have a web app that is completely contolled with javascript. This means there is only one request that renders the full page, everything else is json'ed to be rendered.
Facebook share uses opengraph tags in the head to control what text and image to display in the sharing, but my application is a single page, single header, so that I could use only one image for all links on the app.
We are using hashbangs (#!) to control where the user is within the application, but we also have a url rewriter that, when the user hits a URL like
http://domain/action/id
they get sent to (through a redirect header)
http://domain/#!/action/id
So, given this scenario, I want to know if there is a way to share my urls on facebook, and tell facebook to get a different image for each of my URLs.
When facebook-share gets the page, it does not process the javascript in it - but tries to search for the opengraph tags in it. so basically there is no way to share your url's on facebook and have a different picture unless you have your opengraph tags loaded in the response - without javascript. Think of what would you do if you had no javascript at all..
So what you would have to do is to load the opengraph tags in the page before you use javascript.
I am building a bookmarklet for various sites that functions basically like this:
User navigates to foo.com (an external site not on my control)
User clicks a bookmarklet on his browsers that grabs some information from foo.com and displays it on a form in bar.com inside an iframe
User submits the form inside bar.com which is inside foo.com
The iframe dissapears
The problem is getting the iFrame to remove itself. Since I can't access a function inside a parent domain in another domain I cannot create a custom function parent.removeIFrame() or even do a window.top.location.reload(). I tried many techniques but all of them fail because of cross domain scriptings.
The way I solved it was to change the top.location.href to a custom page I built at bar.com/back.html in which all it does is simply to send a single "history.back()" command that bounces the user on the original page. Althought creative, I don't think it's very elegant solution. Is there a better way?
You can try fragment identifier for cross domain messaging. There is a YUI library for it: http://www.julienlecomte.net/blog/2007/11/31/
When you injected the JS code to create the form on the site's page you can have it poll (js outside of the newly created iframe) your server to know when to remove the iframe. You can use all kinds of methods of doing this including jsonp, long polling, post message, fragment identifiers, etc. You do not need to load a big library for this - the smaller the better for bookmarklets.